uni-app使用vuex+vuex-persistedstate

vuex是基于vuex.js的状态管理工具，可以把它理解为一个仓库。在其中存放的是各个组件可以复用的公共状态，为了防止刷新丢失的问题，我们使用vuex-persistedstate插件来做本地持久化存储——

uni-app内置了vuex，所以我们只需要安装

npm install --save vuex-persistedstate

新建store目录，新建store.js，代码如下

// <!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

//数据持久化插件
import createPersistedState from 'vuex-persistedstate'  


Vue.use(Vuex);//vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
    
    
    state:{
    
    //存放状态
        "username":"",
        "token":''
    },
	mutations:{
    
    
		updateToken(state,str){
    
    
			state.token=str
		}
	},
	actions:{
    
    
		
	},
	modules:{
    
    
		
	},
	plugins: [  
	    // 可以有多个持久化实例  
	    createPersistedState({
    
      
	      key: 'app_config_data',  // 状态保存到本地的 key   
	      paths: ['token', 'username'],  // 要持久化的状态，在state里面取，如果有嵌套，可以  a.b.c   
	      storage: {
    
      // 存储方式定义  
	        getItem: (key) => uni.getStorageSync(key), // 获取  
	        setItem: (key, value) => uni.setStorageSync(key, value), // 存储  
	        removeItem: (key) => uni.removeStorageSync(key) // 删除  
	      }  
	    })  
	  ]  
})
export default store

在main.js中注入store,代码修改如下

//引入vuex
import store from './store/store.js'

Vue.prototype.$store = store

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

目前使用正常，本地化可持久存储……若不兼容其他端，可尝试在uni-app插件市场安装mp-storage
mp-storage