vuex可以进行全局的状态管理,但刷新后的数据会消失,每次还要手动存在本地缓存里很不方便,这不是我们想要的效果,怎么解决呢,我们可以结合本地存储做到数据持久化,也可以通过插件Vuex-presistedstate。
方法一 利用H5的本地存储
vuex的state在localStorage或者sessionStorage或者其他存储方式中取值,在mutations,定义的方法中对Vuex的状态操作的同时也对存储也做相应的操作
示例代码
store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import global from './modules/global';
import login from './modules/login';
Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production';
export default new Vuex.Store({
modules: {
global,
login,
},
strict: debug,
plugins: debug ? [createLogger()] : []
});
store/login.js使用sessionStorage
const state = {
loginState: sessionStorage.getItem('loginState')||false,
token:sessionStorage.getItem('token')||'',
user:sessionStorage.getItem('user')||'',
userName:sessionStorage.getItem('userName')||'',
};
const mutations = {
[SET_USER](state, payload){
state.user = payload;
sessionStorage.setItem('user', payload);
},
[SET_TOKEN](state, payload){
state.token = payload;
sessionStorage.setItem('token', payload);
},
[SET_USERNAME](state, payload){
state.userName = payload;
sessionStorage.setItem('userName', payload);
},
[SET_LOGIN_STATE](state, payload){
state.loginState = payload;
sessionStorage.setItem('loginState', payload);
}
};
方法二 使用Vuex-persistedstate插件
插件将vuex与localstorage结合起来,不需要再写存储。
安装
npm install vuex-persistedstate --save
或者
<script src="https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js"></script>
目前的环境版本
"vue": "2.2.4",
"vuex": "^2.5.0",
"vuex-persistedstate": "^2.5.4"
配置使用
store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import createPersistedState from 'vuex-persistedstate'
import global from './modules/global';
import login from './modules/login';
Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production';
const persistedState = createPersistedState({
paths: ['login.token', 'login.userName', 'login.user', 'login.userType'], // 需要持久化的数据,只有这几个数据需要持久化
storage: window.sessionStorage //vuex-persistedstate默认使用localStorage来固化数据,
})
export default new Vuex.Store({
modules: {
global,
login,
},
strict: debug,
plugins: debug ? [createLogger(), persistedState] : [persistedState]
});
对应的state在localStorage或者sessionStorage或者其他存储方式中不再进行取值操作,在mutations不再存值操作,插件完成关联操作。
const state = {
user: '',
userName: '',
userId: '',
userType: ''
};
const mutations = {
[SET_USER](state, payload){
state.user = payload;
// sessionStorage.setItem('user', payload);
},
[SET_TOKEN](state, payload){
state.token = payload;
// sessionStorage.setItem('token', payload);
},
[SET_USERNAME](state, payload){
state.userName = payload;
// sessionStorage.setItem('userName', payload);
},
[SET_USERID] (state, payload) {
state.userId = payload
// sessionStorage.setItem('userId', payload);
},