Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的方法代码

persist: {
  enabled: true,
  strategies: [
    {
      key: 'user',
      storage: localStorage,
      paths: ['name'], // 只持久化 `name`
    },
  ],
},

persist: {
  enabled: true,
  strategies: [
    {
      key: 'user',
      storage: sessionStorage,
      serializer: {
        serialize: (value) => btoa(JSON.stringify(value)), // Base64 编码
        deserialize: (value) => JSON.parse(atob(value)),  // Base64 解码
      },
    },
  ],
},

npm install pinia pinia-plugin-persistedstate

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedState from 'pinia-plugin-persistedstate';
import App from './App.vue';

const app = createApp(App);

// 创建 Pinia 实例
const pinia = createPinia();

// 使用持久化插件
pinia.use(piniaPluginPersistedState);

app.use(pinia);
app.mount('#app');

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', () => {
  const name = ref('王强')
  const age = ref(25)
  function setName(name: string) {
	name.value = name
  }
  return {
  	name,
  	age,
  	setName
  }
}, 
  {
    persist: {
      storage: sessionStorage
    }
  }
)

<template>
  <div>
    <p>用户名：{{ userStore.name }}</p>
    <button @click="updateName">修改用户名</button>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();

const updateName = () => {
  userStore.setName('张三');
};
</script>

// 直接修改
userStore.name = '张三'

// 通过 $patch({}) 批量对象修改
userStore.$patch({
 name: '张三',
 age:19
})

// 通过 $patch((state) => {}) 回调函数修改
userStore.$patch((state) => {
    state.name = '张三'
    state.age = 19
})

// 通过 action 修改
userStore.setName('张三');

userStore.$reset()

import { storeToRefs } from 'pinia'
const userStore = useUsersStore()
const { name } = storeToRefs(userStore)

/**
 * 当 state 中的值任意一个发生变化的时候，就会触发该函数
 * 
 * args: 里面会记录新旧值
 * state：就是当前操作的 state 的实例
 * options: 是一个对象，比如 detached，这是一个 boolean 参数，当这个参数为 true 时，表明即使当前组件销毁后，也继续监控 state 里面值的变化，可选
 */
 userStore.$subscribe((args, state) => {
  console.log('args', args)
  console.log('state', state)
},{
  detached: true
})

/**
 * 当调用 actions 里面的函数的时候，就会触发改函数
 *
 * args：接收参数，里面封装了多个 api：
 *      args.after：当 $onAction 里面的逻辑执行完成之后才会执行 args.after 函数逻辑，所以 args.after 放置的位置于执行顺序无关
 *      args.onError：当调用 actions 里面的函数发生错误时，args.onError 函数也会执行
 *      args.args：接收调用 actions 里面的函数传递的参数，是一个数组
 *      args.name：执行的 actions 里面的函数的名称
 * detached: 这是一个 boolean 参数，当这个参数为 true 时，表明即使当前组件销毁时，也继续监控 actions 里面的函数调用，可选
 */
userStore.$onAction((args) => {
    args.after(() => console.log("args.after", "===="));
    console.log("args", args);
}, true);