前端 JS 经典：Vue 状态仓库持久化
前言：当我们刷新页面的时侯，在状态仓库的数据会被重置，当我们不希望这些数据被重置时，可以通过给状态管理的插件添加插件方法实现。Vue 的状态管理有 Vuex 和 Pinia。下面分别是两种状态库的数据持久化的实现。
1. Vuex
在 store/index.js 里插入自定义的 persistPlugin 方法
import { createStore } from "vuex";
import user from "./user.js";
import persistPlugin from "./persistPlugin.js";const store = createStore({modules: {user,},plugins: [persistPlugin],
});export default store;自定义 persistPlugin 方法，给浏览器监听刷新页面的操作，存入数据。在最开始获取数据
// persistPlugin.js
const KEY = "VUEX:STATE";
export default function (store) {// 存window.addEventListener("beforeunload", () => {localStorage.setItem(KEY, JSON.stringify(store.state));});// 取try {const state = JSON.parse(localStorage.getItem(KEY));if (state) {store.replaceState(state);}} catch {console.log("存储报错");}
}2. Pinia
在 main.js 中给 Pinia 插入自定义插件
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
import persistPlugin from "./persistPlugin.js";const pinia = createPinia();
pinia.use(persistPlugin);const app = createApp(App);app.use(pinia);
app.mount("#app");自定义 persistPlugin 方法，同 Vuex 大致一样。
const KEY_PREFIX = "PINIA:STATE:";
export default function (context) {const { store } = context;// 存window.addEventListener("beforeunload", () => {localStorage.setItem(`${KEY_PREFIX}${store.$id}`,JSON.stringify(store.$state));});// 取try {const state = JSON.parse(localStorage.getItem(`${KEY_PREFIX}${store.$id}`));if (state) {store.$patch(state);}} catch {console.log("存储报错");}
}