Vuex 持久化存储借助 vuex-persistedstate

最新推荐文章于 2023-11-19 15:17:02 发布

原创最新推荐文章于 2023-11-19 15:17:02 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

8 篇文章

订阅专栏

文章介绍了如何通过npm安装vuex-persistedstate包，并在Vuex的store中引入和配置该插件，以实现用户和权限模块的状态持久化，存储的key为per-user，并指定user模块的数据进行缓存。

1、下载包

npm install vuex-persistedstate

2、在 store/index 中引入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import permission from './modules/permission'
// 引入持久化模块包
import createPersistedstate from 'vuex-persistedstate'

Vue.use(Vuex)

// 这是vuex 的模块
const store = new Vuex.Store({
  modules: {
    user,
    permission
  },
  plugins: [
    createPersistedstate({
      key: 'per-user', // 存数据的key名   自定义的  要有语义化
      paths: ['user'] // 要把那些模块加入缓存
    })
  ]

})
export default store