Pinia 状态管理的数据持久化 （pinia

持久化 （pinia"/>

Pinia 状态管理的数据持久化 （pinia

1.pinia:

1.一文搞懂pinia状态管理（保姆级教程） - 知乎
2.Pinia 中文文档

3. pinia-persistedstate-plugin官网地址： Getting Started | pinia-plugin-persistedstate

2. pinia-plugin-persistedstate:

2.1 下载

 npm：npm install pinia-persistedstate-plugin

 yarn：yarn  add pinia-persistedstate-plugin

2.2 main.ts 引用 

// 依赖pinia
import {createPinia } from 'pinia'
// 引入数据持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// 注册
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

2.3 简单使用

import { defineStore } from 'pinia';// 存取地图经纬度export interface MapState {locations: Array<string>;address: string;
}export const useMapStore = defineStore('map', {state: (): MapState => ({locations: [],address: '',}),getters: {},actions: {setLocation(location: Array<string>, adress: string): void {this.locations = location;this.address = adress;},setAdress(address: string) {this.address = address;},clearMessage() {this.address = '';this.locations = [];},},persist: {key: 'map',storage: sessionStorage,},
});

3.其他说明

Pinia 的 状态管理的数据持久化 还可以使用 pinia-plugin-persist , 但是 不推荐使用 ，在使用pinia-plugin-persist的过程中，出现了一些bug ，比如使用过程中数据改变 storage 没有更新。

所以 推荐使用 pinia-plugin-persistedstate。