【渣翻】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 : 需要存储的状态名（默认:vuex）

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

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

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

• storage