vuex-persistedstate（Vue 的数据持久化插件）

项目中常会有 vuex 数据持久化的需求, 除了手动将数据保存至 localstorage 或 cookies … 中, 也可以通过插件来解决

使用步骤

1. 通过 npm 安装

   npm i vuex-persistedstate
   

2. 在项目的 src/store/index.js 中引入

   import createPersistedstate from 'vuex-persistedstate'
   

3. 在 store 实例 中进行配置

   export default createStore({
     modules: {
       user
   	// ...
     },
   +  plugins: [
   +    createPersistedstate({
   +      key: 'data-name',
   +      paths: ['user']
   +    })
   +  ]
   })
   

注意:

• 持久化默认是存储在localStorage中;
• key是存储数据的键名;
• paths 中存储的是 state 中的数据，如果是模块下具体的数据需要加上模块名称，如user.token;
• 使用时在修改 state 后触发, 才可以看到本地存储数据的的变化;

---