最近在重构以前的老代码，发现上一个前端都是直接用sessionStorage.setItem做的数据存储，对于Vuex也没有做一个持久化的存储，刷新就没了。

于是我对这个重新做了一个处理。
大致是这么想的，

第一点：我想每次修改store里面的数据的时候，sessionStorage就自动存储更新一遍，而不是我手动去更新sessionStroage里面的数据。

我的做法是：使用vuex的 subscribe 订阅。

因为要修改store里面的数据，会调用到mutation 。而subscribe是订阅 store 的 mutation。handler 会在每个 mutation 完成后调用，接收 mutation 和经过 mutation 后的状态作为参数：意味着我每次调用mutaion它就会执行一次，那么在我数据状态不多的情况下，我可以简单粗暴的使用这个方法，每调用一次mutaion我就做一次session的更新。

在vuex的index.js界面：

store.subscribe((mutations, state) => {
    sessionStorage.setItem('XXXXX', JSON.stringify(state))
})

你可以做多个存储名字，每次只存储你想存储的部分。

第二点：我希望我刷新页面之后，我vuex的数据不会丢失。

vuex 是没有持久化存储的，刷新之后需要重新从sessionStorage里面获取数据，所以我们需要监听页面刷新这一个动作，来达到刷新的时候,vuex里面的能自动获取sessionStorage里面的数据重新给自己赋值一遍。

// 为了防止刷新时vuex的数据丢失
    if (sessionStorage.getItem("XXXXX") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("XXXXX"))))
    } 
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    // pagehide为了兼容ios
    window.addEventListener("pagehide",()=>{
        sessionStorage.setItem("XXXXX",JSON.stringify(this.$store.getters))
    })

就可以了