由于vue自身特性的原因，vuex中的數(shù)據(jù)在頁面刷新之后其中的數(shù)據(jù)會初始化，這就導致組件之間通過vuex傳遞的數(shù)據(jù)在用戶f5刷新頁面之后會丟失

這里結(jié)合h5的localStorage實現(xiàn)頁面刷新之后數(shù)據(jù)不丟失的方法

代碼如下

const store = new Vuex.Store({
  // 定義狀態(tài)
  state: {
    lang: localStorage.getItem("changeLang") || 'zh', //先去localStorage中獲取數(shù)據(jù)
    myInfo: JSON.parse(localStorage.getItem("myInfo")) || {}, //這里使用JSON.parse是因為我localStorage中保存的是一個對象字符串
  },
  //修改狀態(tài)
  mutations:{
    setInfo(state,info){
      localStorage.setItem('myInfo', JSON.stringify(info)); //將傳遞的數(shù)據(jù)先保存到localStorage中
      state.myInfo = info;// 之后才是修改state中的狀態(tài)
    },
    changeLangEvent(state, type) {
      localStorage.setItem('changeLang', type);
      state.lang = type;
    },
  },
})
export default store

組件中使用方法

let res = {
  name:'張三'，
  age:18
}
this.$store.commit('setInfo',res); //更新myInfo