阅读 2646

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

场景重现

相信很多小伙伴在使用Vuex存储状态数据时,都遇到过这样的尴尬处境:

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

当进行刷新、回退、前进(之后简称:骚操作)时,发现Vuex存储的状态值,都变成了初始值!

oh~no~ 😫 这不是我要的效果!!

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

产生原因

在解决问题前,我们先来捋一捋~为啥会这样呢?

Vuex是js工程,数据是存储在内存中,在进行骚操作时,会让Vuex重新加载,致使数据全部还原成初始值!

解决思路

Vuex既然在进行这些骚操作时会丢失,那是不是可以考虑用localStoragesessionStorage甚至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内有效,让功能更加细致化
  • 添加includeexclude字段,让state可以选择性的更替快照
  • and so on...
  • 如有你有更好的idea,欢迎留言~

这是我的第一篇博文,写的不好的地方还请大家多多指教!轻点吐槽~

谢谢!☕️~