优雅的解决Vuex状态丢失的问题

场景重现

相信不少小伙伴在使用Vuex存储状态数据时，都遇到过这样的尴尬处境：

浏览器在未刷新、回退、前进时，Vuex一切正常；

当进行刷新、回退、前进（以后简称：骚操做）时，发现Vuex存储的状态值，都变成了初始值！

oh～no～ 😫 这不是我要的效果！！

好不容易从API拿过来的基础数据，都没了～一朝回到解放前！

产生缘由

在解决问题前，咱们先来捋一捋～为啥会这样呢？

Vuex是js工程，数据是存储在内存中，在进行骚操做时，会让Vuex从新加载，导致数据所有还原成初始值!

解决思路

Vuex既然在进行这些骚操做时会丢失，那是否是能够考虑用localStorage、sessionStorage甚至Cookie来持久化存储Vuex呢？

答案固然是能够的！

咱们去翻翻 Vuex官网，能够看到Vuex提供了很是方便的插件功能来帮助咱们来搞定这个需求～

废话很少说，直接上代码～

// @/store/plugins/createPersistedPlugin.js
export default function createPersistedPlugin(options = { key: 'store' }) {
    return store => {
        // 1. 判断`sessionStorage`中是否有`Vuex`快照
        let sessionStore = JSON.parse(sessionStorage.getItem(options.key))
        // 若无，则使用初始值, 不然使用快照的值
        sessionStore && store.replaceState(sessionStore)
        // 临时工，用完就解雇了～
        sessionStore = null
        // 2. 监听`Vuex`中`mutation`的变化
        store.subscribe((mutation, state) => {
            // 3. 动态存储`Vuex`快照至`sessionStorage`中
            sessionStorage.setItem(options.key, JSON.stringify(state))
        })
    }
}
复制代码

使用方法：

// @/store/index.js
import createPersistedPlugin from './plugins/createPersistedPlugin.js'
const persistedPlugin = createPersistedPlugin()

const store = new Vuex.Store({
  state,
  // 其余代码
  mutations,
  plugins: [persistedPlugin]
})

复制代码

至此，不再用担忧测试员进行骚操做啦～😄

总结

以上代码也就抛砖引玉～还有更多能够完善的余地，如：

• 将sessionStorage提炼到options中，能够根据不一样业务场景使用对应的持久化对象，如localStorage
• 在options中加上一个expires有效期，在expires内有效，让功能更加细致化
• 添加include、exclude字段，让state能够选择性的更替快照
• and so on...
• 若有你有更好的idea，欢迎留言～

这是个人第一篇博文，写的很差的地方还请你们多多指教！轻点吐槽～

谢谢！☕️～