Vue

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