Vue中使用vuex在页面刷新之后状态不丢失的解决方法

由于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