[笔记] 用 vuex-persistedstate 来保持你的 vuex 状态

章节连结

在使用 Vue 开发时,若使用者进行重复加载的动作,那原先的状态如登入、默认选择语系…等,就会一并消失了。vuex-persistedstate 可以有效的存取 vuex 的状态到浏览器的储存空间如 localStorage,这样一来重新加载时就有机会可以取得状态。

vue.js logo vue


使用方法

官方网站:https://github.com/robinvdvleuten/vuex-persistedstate

你可以使用 npm 安装,或是 cdn 的形式 ( 用 window.createPersistedState ) 来获得相关的 Object。以下为使用 npm 安装的范例:

1. 在 vuex 中用 import 的形式引入,并在建立新的 Vuex Instance 时将这个套件包含进去即可

2. 若要搭配其他的 Module 使用也是可以的,其中的重点参数为 paths。在这其中,paths 若为 [] 等同于不储存任何状态,指定的方式须以 moduleName.key 的形式。若我要储存根目录下的 selectedLanguage 状态和 moduleA 的 keyA  状态,那 paths 的写法就是:[ “selectedLanguage”, “moduleA.keyA”]

3. 要注意的地方是:第一次加载 vue 实体时,并不会回存已经暂存的 vuex 状态。你需要额外写判断式才能将其加载。一般情况下,是在有 vuex 的状态改动时,才会同步保存下来。

 


Reference

1. 更高效的vuex状态缓存方式-createPersistedState


按赞加入粉丝团

延伸阅读