Vuex持久化插件(vuex-persistedstate)

news2025/1/24 5:25:42

为什么使用持久化

目的: 让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。

在开发的过程中，像用户信息（名字，头像，token）需要vuex中储存且需要本地储存
再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页面需要储存在本地

使用步骤

1. 首先：我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化

npm i vuex-persistedstate

2. 然后：在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js和category.js 三个模块。 (根据项目需求创建)

3. 继续：在 src/store/index.js 中导入 user cart 模块。

import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'

4. 最后：使用vuex-persistedstate插件来进行持久化

import { createStore } from 'vuex'
// 引入vuex持久化方法createPersistedState
import createPersistedState from 'vuex-persistedstate'
import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {
    // 模块化数据
    user,
    cart,
    category
  },
  plugins: [
    // veux持久化配置
    createPersistedstate({
      key: 'rabbitstore-client',
      paths: ['user', 'cart']
    })
  ]
})

注意：

===> 默认是存储在localStorage中

===> key是存储数据的键名

===> paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token

===> 修改state后触发才可以看到本地存储数据的的变化。、

效果演示

测试： user模块定义一个mutation在main.js去调用下，观察浏览器application的localStorage下数据。

<template>
  <div class="layout">
    <p>用户的userName为: {{$store.state.user.profile.account}}</p>
    <!-- 触发user模块下的方法修改数据 -->
    <button @click="$store.commit('user/setUser',{account:'张三'})">修改user模块的数据</button>
  </div>
</template>

<script>
// import { useStore } from 'vuex'
export default {
  name: 'Layout',
  setup () {
    // 在setup中获取使用vuex仓库
    // const store = useStore()
  }
}
</script>

我们打开调式工具可以看到我们可以看到我们没有修改数据时本地储存是空的