Pinia 状态管理的数据持久化 （pinia-plugin-persistedstate）

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

 yarn：yarn  add pinia-persistedstate

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。