实用插件--vuex

Vuex-持久化　

vuex-persistedstate 插件

使用该插件让在vuex中管理的状态数据自动同时存储在本地免去自己存储的环节

使用流程: 1.npm或yarn 下载包

npm i vuex-persistedstate

2.在store/index.js文件中使用插件

import { createStore } from 'vuex' // 引入
import createPersistedstate from 'vuex-persistedstate'

export default createStore({
  modules: {
  },
  plugins: [ // 配置
    createPersistedstate({
      key: 'erabbit-client-pc-store',
      paths: ['引入的模块名', '引入的模块名'] // 路径
    })
  ]
})

说明:

1. 默认是存储在localStorage中，可以对存储的方法进行自定义
2. key是存储数据的键名
3. paths是存储state中的哪些数据，如果是模块下具体的数据需要加上模块名称，如user.token
4. 修改state中的数据即可触发同步机制，可以看到本地存储数据的的变化