由于vue自身特性的原因，vuex中的数据在页面刷新之后其中的数据会初始化，这就导致组件之间通过vuex传递的数据在用户f5刷新页面之后会丢失
这里结合h5的localStorage实现页面刷新之后数据不丢失的方法
代码如下
const store = new Vuex.Store({
// 定义状态
state: {
lang: localStorage.getItem("changeLang") || 'zh', //先去localStorage中获取数据
myInfo: JSON.parse(localStorage.getItem("myInfo")) || {}, //这里使用JSON.parse是因为我localStorage中保存的是一个对象字符串
},
//修改状态
mutations:{
setInfo(state,info){
localStorage.setItem('myInfo', JSON.stringify(info)); //将传递的数据先保存到localStorage中
state.myInfo = info;// 之后才是修改state中的状态
},
changeLangEvent(state, type) {
localStorage.setItem('changeLang', type);
state.lang = type;
},
},
})
export default store
组件中使用方法
let res = {
name:'张三'，
age:18
}
this.$store.commit('setInfo',res); //更新myInfo
