【VUE】pinia持久化存储

前言：状态持久化存储的意义在于它能够确保用户在与应用程序交互时，其操作状态、用户偏好、应用数据等关键信息在页面刷新、浏览器关闭或重新启动后依然得以保留，从而提供连贯、无缝的用户体验，避免因状态丢失导致的不便和重复操作。下面我们一起试试吧。

安装安装 Pinia：

pnpm install pinia
# 或者
yarn add pinia

在项目的入口文件（通常是 main.js 或 main.ts）中，创建一个 Pinia 实例，并将其挂载到 Vue 应用程序上：

创建 Pinia 实例：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');

定义 Store：

使用 defineStore 方法来创建一个 Store。Store 是用来管理状态的地方：

import { defineStore } from 'pinia';
export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

安装并配置持久化插件：

npm install pinia-plugin-persistedstate
# 或者
yarn add pinia-plugin-persistedstate

在 Pinia 实例上注册插件：

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

在 Store 中启用持久化：

export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0,
  }),
  persist: true, // 持久化整个状态
  // 或者
  persist: {
    key: 'my-store',
    storage: localStorage,
    pick: ['count'], // 仅持久化 count 字段
  },
});

当然，我们也可以自己尝试着实现一下

定义持久化存储插件方法

// 定义存储key前缀
const KEY_PREFIX = 'PINIA_STORE_';
import { type PiniaPluginContext } from 'pinia';

/**
 *
 * @param context pinia上下文实例
 */
export default function (context: PiniaPluginContext) {
  const { store } = context;
  const key = KEY_PREFIX + store.$id;
  // 页面卸载(刷新、关闭)前存储
  window.addEventListener('beforeunload', () => {
    localStorage.setItem(key, JSON.stringify(store.$state));
  });
  // 页面加载是取
  store.$patch(JSON.parse(localStorage.getItem(key) || '{}'));
}

挂在到pinia实例上

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
import persist from '@/stores/persist';
pinia.use(persist);
app.use(pinia);
app.mount('#app');

预览

参考

• 插件文档