前言：当我们刷新页面的时侯，在状态仓库的数据会被重置，当我们不希望这些数据被重置时，可以通过给状态管理的插件添加插件方法实现。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("存储报错"); } }
