版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yhflyl/article/details/88973397
vuex
问题: 当刷新页面的时候vuex仓库中的数据丢失
解决方法
1、使用localStorage
2、使用sessionStorage
个人建议
对于localStorage的数据是永久保存(自己不去删除的时候),所以个人觉得不是很安全,所以使用sessionStorage比较合适。
具体使用
mutations: {
// 菜单信息
getMenuItems (state, payload) {
const menuItems = payload
// 将js对象转为字符串
sessionStorage.setItem('menuItems', JSON.stringify(menuItems))
state.menuItems = menuItems
}
}
在getter中使用
getters: {
getMenuItems: state => sessionStorage.getItem('menuItems') ? JSON.parse(sessionStorage.getItem('menuItems')) : state.menuItems,
}
完整代码
import { GETMENU } from '@/api/login'
const login = {
state: {
menuItems: []
},
getters: {
getMenuItems: state => sessionStorage.getItem('menuItems') ? JSON.parse(sessionStorage.getItem('menuItems')) : state.menuItems
},
actions: {
sendMenuItems ({ commit }, payload) {
return GETMENU(payload).then((res) => {
if (res.success) {
commit('getMenuItems', res.data)
}
})
}
},
mutations: {
getMenuItems (state, payload) {
const menuItems = payload
sessionStorage.setItem('menuItems', JSON.stringify(menuItems))
state.menuItems = menuItems
}
}
}
export default login