vuex刷新之后数据丢失,数据持久化,vuex-persistedstate
为什么刷新之后vuex的状态就没了?原因是刷新之后js初始化,vuex重新初始化了;常见的解决方案有1,mounted里面调接口重新给state赋值,太麻烦,pass2,watch里面监听state,再赋值,也很lowvuex理解不透彻的可以先看看完美方案是利用sessionStorage/localStorage,做一个暂时的储存store的模块化结构主要是针对mutation...
·
为什么刷新之后vuex的状态就没了?
原因是刷新之后js初始化,vuex重新初始化了;
常见的解决方案有
1,mounted里面调接口重新给state赋值,太麻烦,pass
2,watch里面监听state,再赋值,也很low
vuex理解不透彻的可以先看看
完美方案是利用sessionStorage/localStorage,做一个暂时的储存
store的模块化结构
主要是针对mutations 和 getters 做一个简单的赋值和取值封装
mutations.js改变state的同时在本地做一个备份
const setStorage = (key, value) => {
if (typeof (value) === 'object') {
value = JSON.stringify(value)
}
sessionStorage.setItem(key, value)
}
/*
* 避免刷新之后vuex被重置,在sessionStorage做一个备份
*/
const mutations = {
set_userInfo (state, payload) {
state.userInfo = payload
setStorage('userInfo', payload)
},
set_token (state, payload) {
state.token = payload
setStorage('token', payload)
},
set_roles (state, payload) {
state.roles = payload
setStorage('roles', payload)
},
set_breadcrumb (state, payload) {
state.breadcrumb = payload
setStorage('breadcrumb', payload)/* */
}
}
export default mutations
getters.js 取值时默认从state里面取,没有就从本地拿
import createdRoutes from '@/utils/createdRoutes.js'
import { asyncRoutes } from '@/router/index.js'
let getStoryage = (item) => {
let str = sessionStorage.getItem(item)
return JSON.parse(str)
}
const getters = {
get_userInfo: (state) => {
return state.userInfo ? state.userInfo : getStoryage('userInfo')
},
get_token: (state) => {
return state.token ? state.token : sessionStorage.getItem('token')
},
get_roles: (state) => {
return state.roles.length ? state.roles : getStoryage('roles')
},
addRouters: (state, getters) => {
let routes = createdRoutes(asyncRoutes, getters.get_roles)
return routes
},
get_breadcrumb: (state, getters) => {
return state.breadcrumb.length ? state.breadcrumb : getStoryage('getStoryage')
}
}
export default getters;
在页面vue文件直接用mapGetters获取状态值
这样一来就算state被清空了,还可以在本地储存里面获取状态值
后记:
本来想写一个插件完成上面的事,结果发现一个已经写好的 vuex-persistedstate
用法:
import state from './state.js'
import getters from './getters.js'
import mutations from './mutations.js'
import actions from './actions.js'
import Vuex from 'vuex'
import Vue from 'vue'
import { deepCopy } from '@/utils/util'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
let store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state,
getters,
mutations,
actions,
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer (state) {
let _state = deepCopy(state) // 深拷贝一份 删除不想保存的
delete _state.hasLogin
delete _state.ziYuanLaiYuan
delete _state.orderStatus
delete _state.taxPersonType
return _state
}
})]
})
export default store
深拷贝
```bash
/**
* 深拷贝
* @param {Array,Object} obj
*/
export const deepCopy = (obj) => {
// 根据obj的类型判断是新建一个数组还是一个对象
let newObj = obj instanceof Array ? [] : {};
for (let key in obj) {
// 判断属性值的类型,如果是对象递归调用深拷贝
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
return newObj;
}
更多推荐
已为社区贡献7条内容
所有评论(0)