關於vuex頁面刷新問題的兩種解決思路和最終解決方案

1：設置state爲null,而後在對應的getters裏面添加sessionStorage控制,在mutations裏面添加對應sessionStorage控制,如：

let _store = {
  state: {
    appType: null
  },
  getters: {
    appType(state){
        if(!state.appType) {
          state.appType = getSessionStorage("appType")
        }
        return state.appType
    }
  },
  mutations: {
    setAppType (state, appType) {
       state.appType = appType
       setSessionStorage("appType",appType)
    }
  }
};

　　缺點:必須爲state設置爲null,而且必須爲每個getters添加sessionStorage控制,比較繁瑣

 

2：在頁面初始化的時候,取出全部的保存在sessionStorage裏面的值,同時在頁面刷新前,將全部的state保存在sessionStorage裏面

//在頁面加載時讀取sessionStorage裏的狀態信息
if (sessionStorage.getItem("store") ) {
    this.$store.replaceState(Object.assign({},     
    this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}

 
//在頁面刷新時將vuex裏的信息保存到sessionStorage裏
window.addEventListener("beforeunload",()=>{
    sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})

 

缺點:beforeunload在移動端有兼容性問題

 

最終解決方案:

獲取：編寫vuex插件,當store初始化後,將保存在本地的state更新到vuex

const myPlugin = store => {
      // 當 store 初始化後調用
      let _state = store.state;
      for(let key in _state) {
        let _sessionvalue = getSessionStorage(key);
        if(_sessionvalue) {
          _state[key] = _sessionvalue; 
        }
      }
　　　

      store.replaceState(_state)

}

　修改：利用vuex插件中store提供的每次進行mutation以後的回調鉤子,來獲取到state,而後與以前保存的state作對比,取出不同的state,而後保存到sessionStorage

const myPlugin = store => {
      // 當 store 初始化後調用
      let _state = store.state;
      for(let key in _state) {
        let _sessionvalue = getSessionStorage(key);if(_sessionvalue) {
          _state[key] = _sessionvalue; 
        }
      }
      store.replaceState(_state)

      window.proxyState = {}
      Object.assign(window.proxyState, _state)//初始化state
    
    
      //註冊修改監聽事件
      store.subscribe((mutation, state) => {
        let _state = diffFirst(state, window.proxyState)
        if(_state.name){
          setSessionStorage(_state.name,_state.value)
        }
        Object.assign(window.proxyState, state)
      })
    }

 

 缺點:不支持模塊因此爲了兼容模塊,w咱們在上面方法的基礎上再進一步,在監聽修改state事件的時候,咱們把模塊的路徑加上m這一點能夠從mutation.type拿到,而後保存到sessionStorage裏面的時候把路徑帶上,同時把全部的更改記錄保存在一個單獨的session裏面,在初始化的時候先在那個單獨的session裏面拿到全部的更改的state記錄,而後依據這些state進行初始化。