建设项目环境影响登记表备案系统网站,怎样查app开发公司,wordpress支持php几,交通建设集团网站前言#xff1a;状态持久化存储的意义在于它能够确保用户在与应用程序交互时#xff0c;其操作状态、用户偏好、应用数据等关键信息在页面刷新、浏览器关闭或重新启动后依然得以保留#xff0c;从而提供连贯、无缝的用户体验#xff0c;避免因状态丢失导致的不便和重复操作… 前言状态持久化存储的意义在于它能够确保用户在与应用程序交互时其操作状态、用户偏好、应用数据等关键信息在页面刷新、浏览器关闭或重新启动后依然得以保留从而提供连贯、无缝的用户体验避免因状态丢失导致的不便和重复操作。下面我们一起试试吧。 安装安装 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);预览 参考
插件文档
