关于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进行初始化。