在使用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