前端 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("存储报错");
  }
}