uniapp vue2 vuex 持久化

news2024/11/28 13:40:57

1.vuex的使用

一、uniapp中有自带vuex插件，直接引用即可

二、在项目中新建文件夹store,在main.js中导入

在根目录下新建文件夹store,在此目录下新建index.js文件
在这里插入图片描述
index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
		//公共的变量，这里的变量不能随便修改，只能通过触发mutations的方法才能改变
	},
    mutations: {
		//相当于同步的操作
	},
    actions: {
		//相当于异步的操作,不能直接改变state的值，只能通过触发mutations的方法才能改变
	}
})
export default store

在main.js中导入挂载vuex

import Vue from 'vue'
import App from './App'
import store from './pages/store/index.js'
Vue.prototype.$store = store


Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	store,
    ...App
})
app.$mount()

2.使用

第一种方式：this. $s t ore 直接操作例如当取值：直接在页面中使用 t hi s .$ store.state.变量名

第二种方法：mapState, mapGetters, mapActions, mapMutations

<template>
    <view class="content">
    
    </view>
</template>

<script>
    import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
    //导入
    export default {
        data() {
            return {
            }
        },
        computed: { //computed中注册
            ...mapGetters(['text1']),
            ...mapState([
                'text1'
            ])
        }
        methods: {
            ...mapMutations([]),
            ...mapActions([])
        }
    }
</script>

<style>
</style>

3.vuex持久化

问题：

H5应用中存在Vuex中的数据在刷新页面后丢失了。

原因：

Vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 Vue 实例，Vuex数据会重新初始化，导致页面刷新Vuex中的数据丢失的问题。

解决：

使用 vuex-persistedstate 插件
1、在项目目录下执行：npm install --save vuex-persistedstate；
2、修改store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from "vuex-persistedstate"

Vue.use(Vuex)

const store = new Vuex.Store({
	plugins: [
		persistedState({
			storage: {
				getItem: key => uni.getStorageSync(key),
				setItem: (key, value) => uni.setStorageSync(key, value),
				removeItem: key => uni.removeStorageSync(key)
			}
		})
	],
	state:{//存放状态
        "username":'',
        "userid":''
    },
	mutations:{
		//...
	},
	actions:{
		//...
	},
	//...
})

export default store