当前位置：首页 > news >正文

【VUE】pinia持久化存储

news 2025/8/5 16:10:46

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

安装安装 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');