Vuex防止数据丢失!!!
程序员文章站
2024-02-04 20:10:10
...
Vuex防止数据丢失!!!
众所周知在Vuex中存储数据时,当刷新页面就会导致Vuex中的数据丢失,为防止Vuex中的数据丢失,我们可以把Vuex中的数据同步到浏览器的sessionStorage中,每当页面刷新,就从浏览器的sessionStorage中获取数据加载到Vuex中,代码如下:
import {mapState,mapMutations} from 'vuex'
export default {
mounted() {
//如果vuex中没有数据
//从sessionStorage获得数据,并填充到vuex
let userStr = sessionStorage.getItem('user')
if(userStr){
//将字符串 转换json对象
let userObj = JSON.parse(userStr)
//将数据保持到vuex
console.log(userObj)
this.setData({'key':'user','value':userObj})
}
},
methods: {
...mapMutations(['setData']),
},
}
store/index.js
export const state = () => ({
user:null,
})
export const mutations = {
setData(state,obj){
state[obj.key] = obj.value;
}
}
下一篇: 三.防止消息丢失