【Vue】Vuex状态持久化存储

Vuex 状态持久化存储 — vuex-persistedstate插件

1.为什么需要持久化存储

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

但是 Vuex 存在一个问题：当页面刷新时，Vuex 中的数据就会丢失！

因此，我们需要将用户信息、token等需要长期存放的数据实现持久化存储！但如果我们每一次都手动将这些数据存入本地浏览器的缓存中，会比较麻烦。所以我们使用一个插件：vuex-persistedstate

2.实现

使用方法也很简单，先安装插件

npm install vuex-persistedstate --save-dev

在 store 中引入 vuex-persistedstate

import createPersistedState from 'vuex-persistedstate'

初始化 vuex 时加载 vuex-persistedstate 插件即可：

const store = new createStore({
  modules: {
    ...
  },
  getters,
  plugins: [createPersistedState()]
})

插件中默认的存储方式是 localStorage，但也可以修改：

plugins: [
    createPersistedState({ 
        storage: window.sessionStorage, // 存储方式改为sessionStorage
    })
]

补充：Pinia中的持久化存储

在 Vue3 的状态管理工具 Pinia 中，同样可以实现状态持久化存储，但这里使用的插件是：pinia-plugin-persistedstate

要使用该插件，需要在创建 pinia 实例时，应用该插件：

// 入口文件main.js
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

...
app.use(pinia)
...

应用插件后，就可以在使用defineStore()方法时，配置persist选项：

// src/store/index.js
import { defineStore } from "pinia";
...

export default defineStore("xxx", {
    persist: {
        debug: true,
        storage: localStorage,      // 存储方式
        paths: ["user", "token"],   // 存储路径
    },
    ...
})