vue3 pinia使用及持久化注册

npm install pinia
# 或者使用 yarn 
yarn add pinia
# 或者使用 pnpm
pnpm install pinia

//main.ts
import { createApp } from 'vue'
// 导入pinia
import { createPinia } from "pinia";
const pinia = createPinia();
// 挂载
createApp(App).use(pinia).mount('#app')

// src/store/modules/wxpay.ts
import { defineStore } from 'pinia';
interface wxpayState {
     wxpayInfo: any[];
     name: string,
     age: number,
}
// 第一个参数是应用程序中 store 的唯一 id
export const wxpayStore = defineStore('wxpay', {
    state: (): wxpayState => ({
        wxpayInfo: [],
        name: "测试",
        age: 22,
    }),
    getters: {
        getwxpayInfo(): any[] {
             return this.wxpayInfo;
         },
    },
    actions: {
        async getwxpayInfoFromServer() {
         const wxpayInfo = await getWxList({
             page: 1,
             pageSize: 1000,
         });
         this.wxpayInfo = wxpayInfo.data.data;
         },
	   saveName(name: string) {
      	// 修改state中的name
      	this.name = name;
   	 },
    },
});

//xxx.vue
<template>
  <div>name:{{store.name}}</div>
  <div>age:{{store.age}}</div>
</template>
<script lang="ts" setup>
import { wxpayStore } from "@/store/modules/wxpay";
const store = wxpayStore ();
</script>

//xxx.vue
<template>
  <div>name:{{name}}</div>
  <div>age:{{age}}</div>
</template>
<script lang="ts" setup>
import { wxpayStore } from "@/store/modules/wxpay";
const store = wxpayStore ();
// 使用解构取值
const { name, age } = store;
</script>

//xxx.vue
<template>
  <div>name:{{name}}</div>
  <div>age:{{age}}</div>
</template>
<script setup lang="ts">
import {storeToRefs} from 'pinia'
import { wxpayStore } from "@/store/modules/wxpay";
const store = wxpayStore ();
const { name, age} = storeToRefs(store);
</script>

<template>
  <div>name:{{name}}</div>
  <div>age:{{age}}</div>
  <Child></Child>
  <button @click="onEditNameBtn">修改name</button>
</template>
<script lang="ts" setup>
import {storeToRefs} from 'pinia'
import { wxpayStore } from "@/store/modules/wxpay";
const store = wxpayStore ();
const { name, age} = storeToRefs(store);
function onEditNameBtn(){
	name.value="xxxx"
}
</script>

//xxx.vue
<button @click="onEditBtn">批量修改数据</button>
// 法一
const patchStore = () => {
  store.$patch({
    name: "xx",
    age: 10
  });
};
// 法二（推荐）
const onEditBtn= () => {
  store.$patch((state) => {
    state.name='xx'
    state.age = 11
  })
};

// xxx.vue
<button @click="reset">重置</button>
function reset(){
	store.$reset()
}

wxpay.ts
getters: {
	//state:通过state我们可以调取state中的值并进行基础数据操作，然后该方法返回的是一个新的数据。
    getAddAge: (state) => {
      // 返回state中age值，并+1
      return state.age + 1;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },

<p>getters:{{getNameAndAge}}</p>
//解构调用
const store = wxpayStore ();
const { name, age,getNameAndAge} = storeToRefs(store);

//wxpay.ts
getters: {
    getAddParamsAge: (state) => {
      return (params:number)=>state.age + 1 + params;
    },
  },

// xxx.vue
<p>getters+Params:{{store.getAddParamsAge(50)}}</p>

//xxx.vue
<button @click="store.saveName('测试')">调用action中的方法</button>
//结构调用方法
<button @click="saveName('测试')">调用action中的方法</button>
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { wxpayStore } from '@/store/modules/wxpay';
// 获取 store 实例
const store = wxpayStore();
// 使用 storeToRefs 解构出响应式引用
const { clientShows, getClientShow } = storeToRefs(store);
// 直接引用 actions
const { saveName } = store;
// 定义一个方法来编辑名字
function onEditNameBtn() {
  saveName("xxxx");
}
</script>

npm instal pinia-plugin-persistedstate
pnpm install pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate

//src/store/index.ts
import type { App } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const store = createPinia();
store.use(piniaPluginPersistedstate);
export function setupStore(app: App<Element>) {
    app.use(store);
}
export { store };

import { setupStore } from '@/store';
const app = createApp(App)
setupStore(app);

// src/store/modules/wxpay.ts
import { defineStore } from 'pinia';
interface wxpayState {
     wxpayInfo: any[];
     name: string,
     age: number,
}
// 第一个参数是应用程序中 store 的唯一 id
export const wxpayStore = defineStore('wxpay', {
    state: (): wxpayState => ({
        roleInfo: [],
        name: "测试",
        age: 22,
    }),
    getters: {
        getwxpayInfo(): any[] {
             return this.wxpayInfo;
         },
    },
    actions: {
        async getwxpayInfoFromServer() {
         const wxpayInfo = await getWxList({
             page: 1,
             pageSize: 1000,
         });
         this.wxpayInfo = wxpayInfo.data.data;
         },
	   saveName(name: string) {
      	// 修改state中的name
      	this.name = name;
   	 },
    },
  persist: {
//key: 类型：string, 默认值：store.$id, 用于引用 storage 中的数据的键名。随便起,不重复即可
    key: 'wxpay-xxx-xx',
//storage: 类型：StorageLike, 默认值：localStorage, 指定数据持久化的存储介质。必须具有 getItem 和 setItem 方法。
    storage: sessionStorage,
//paths: 类型：string[], 默认值：undefined, 指定 state 中哪些数据需要被持久化。空数组表示不持久化任何状态，undefined 或 null 表示持久化整个 state。
    paths: ['name', 'age'],
//serializer: 类型：Serializer, 默认值：JSON.stringify/JSON.parse, 用于指定持久化时所使用的序列化方法和恢复 Store 时的反序列化方法。
    serializer: {
      serialize: (state) => JSON.stringify(state),
      deserialize: (data) => JSON.parse(data),
    },
//beforeRestore: 类型：(context: PiniaPluginContext) => void, 默认值：undefined,在从 storage 中恢复数据之前触发的 hook。 
    beforeRestore: (context) => {
      // 在恢复数据之前执行操作
    },
//afterRestore: 类型：(context: PiniaPluginContext) => void, 默认值：undefined, 在从 storage 中恢复数据之后触发的 hook。
    afterRestore: (context) => {
  		// 在恢复数据之后执行操作
    },
//debug: 类型：boolean, 默认值：false, 当设置为 true 时，会输出持久化/恢复 Store 时可能发生的任何错误。
    debug: true,
  },
});

persist: true//开启持久化配置

// src/store/modules/wxpay.ts
import { defineStore } from 'pinia';
interface wxpayState {
     wxpayInfo: any[];
     name: string,
     age: number,
}
// 第一个参数是应用程序中 store 的唯一 id
export const wxpayStore = defineStore('wxpay', {
    state: (): wxpayState => ({
        roleInfo: [],
        name: "测试",
        age: 22,
    }),
    getters: {
        getwxpayInfo(): any[] {
             return this.wxpayInfo;
         },
    },
    actions: {
        async getwxpayInfoFromServer() {
         const wxpayInfo = await getWxList({
             page: 1,
             pageSize: 1000,
         });
         this.wxpayInfo = wxpayInfo.data.data;
         },
	   saveName(name: string) {
      	// 修改state中的name
      	this.name = name;
   	 },
    },
 	persist: true
 });