【渣翻】Vuex 刷新、网页跳转状态管理插件vuex-persistedstate

  在使用vuex时突然发现由于设定state时的语句在网页刷新时就会执行一遍，导致之前的登陆状态等state全部被清空，用户不得不再次登陆。google发现vuex-persistedstate这个vue插件可以用于管理在页面刷新和跳转时候的state状态。具体文档翻译如下。原文档见https://www.npmjs.com/package/vuex-persistedstate

 

---

 

环境

•   Vue.js(V2.0.0+)
•   Vuex(V2.0.0+)

安装

$ npm install vuex-persistedstate

简单使用

• Vue.js

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

• Nust.js

  该插件也可以使用在Nuxt.js中。因为命令代码已经被加载过了，所以该插件必须作为Nuxt的插件被引入：

// nuxt.config.js
 
...
plugins: [{ src: '~/plugins/localStorage.js', ssr: false }]
...

// ~/plugins/localStorage.js
 
import createPersistedState from 'vuex-persistedstate'
 
export default ({store}) => {
  createPersistedState({
      key: 'yourkey',
      paths: [...]
      ...
  })(store)
}

API

createPersistedState([options])

  用给定的设置新建一个该插件的实例，下文会列举允许使用的一些属性：

• key <String>: 需要存储的状态名（默认:vuex）

• paths <Array>: 由需要保存state的路径构成的数组。如果为空，则全部路径均视为需要保存状态。 (默认: [ ])

• reducer <Function>: 调用函数用来在某些路径上排除掉不需要需要保留的状态。

• subscriber <Function>: 该函数被用于设定mutation监视（订阅） 默认为 store => handler => store.subscribe(handler)

• storage <Object>: 用于取代（或与原生结合一起使用）getState 和 setState。默认为 localStorage。

• getState <Function>: 将被调用以获取先前保存的状态。默认使用 storage。

• setState <Function>: 将被调用以设定保存的状态。默认使用storage。

• filter <Function>: 将被调用以过滤被setState 改变的 mutations. 默认为() => true

• arrayMerger <Function>: 用以保存需要合并的内容的数组函数。默认为 function (store, saved) { return saved } (saved state replaces supplied state).

自定义存储内容

如果你不想使用Vuex的store把信息存储在localstorage里，那你可能很容易会想到将他存在cookies里（或者其他你想要存的地方）。以下示例代码为存储在cookie中的情况

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
 
const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

实际上你可以把任何遵循存储协议的对象（比如getItem, setItem, removeItem等）传输给

createPersistedState({ storage: window.sessionStorage })

这会使你在服务器端渲染时可以使用该插件进行 dom-storage 的传递。

注意！LocalForage！

很显然LocalForage不能被按照上述方法传递，因为所有的getter和setter都是异步进行的。

License

MIT © Robin van der Vleuten