vue3中的vuex持续化储存（用插件解决）

最新推荐文章于 2024-10-31 14:30:17 发布

原创最新推荐文章于 2024-10-31 14:30:17 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了如何在Vue.js应用中使用vuex-persistedstate插件实现状态持久化。首先，你需要通过npm安装该插件，然后在创建store的js文件中导入并配置。在vuex的plugins数组中，设置key和要缓存的模块（如'user'和'cart'），这样就能在刷新页面后保持用户状态和购物车数据了。

首先需要安装一个插件

npm i vuex-persistedstate

然后在使用了createStore这个方法的js文件中引入

import createPersistedstate from 'vuex-persistedstate'

然后在导出的createStore方法中运用vuex提供的插件配置plugins下做如下操作

// vuex的插件配置
  plugins: [
    createPersistedstate({
      // 缓存数据时的key
      key: 'erabbit-client-pc-store',
      // 哪些模块需要被缓存
      paths: ['user', 'cart']
    })
  ]