阅读 42

实用插件--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中的数据即可触发同步机制,可以看到本地存储数据的的变化
文章分类
前端
文章标签