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);

// 創(chuàng)建 Pinia 實(shí)例
const pinia = createPinia();

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

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

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', () => {
  const name = ref('王強(qiáng)')
  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) => {}) 回調(diào)函數(shù)修改
userStore.$patch((state) => {
    state.name = '張三'
    state.age = 19
})

// 通過 action 修改
userStore.setName('張三');

userStore.$reset()

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

/**
 * 當(dāng) state 中的值任意一個(gè)發(fā)生變化的時(shí)候，就會觸發(fā)該函數(shù)
 * 
 * args: 里面會記錄新舊值
 * state：就是當(dāng)前操作的 state 的實(shí)例
 * options: 是一個(gè)對象，比如 detached，這是一個(gè) boolean 參數(shù)，當(dāng)這個(gè)參數(shù)為 true 時(shí)，表明即使當(dāng)前組件銷毀后，也繼續(xù)監(jiān)控 state 里面值的變化，可選
 */
 userStore.$subscribe((args, state) => {
  console.log('args', args)
  console.log('state', state)
},{
  detached: true
})

/**
 * 當(dāng)調(diào)用 actions 里面的函數(shù)的時(shí)候，就會觸發(fā)改函數(shù)
 *
 * args：接收參數(shù)，里面封裝了多個(gè) api：
 *      args.after：當(dāng) $onAction 里面的邏輯執(zhí)行完成之后才會執(zhí)行 args.after 函數(shù)邏輯，所以 args.after 放置的位置于執(zhí)行順序無關(guān)
 *      args.onError：當(dāng)調(diào)用 actions 里面的函數(shù)發(fā)生錯(cuò)誤時(shí)，args.onError 函數(shù)也會執(zhí)行
 *      args.args：接收調(diào)用 actions 里面的函數(shù)傳遞的參數(shù)，是一個(gè)數(shù)組
 *      args.name：執(zhí)行的 actions 里面的函數(shù)的名稱
 * detached: 這是一個(gè) boolean 參數(shù)，當(dāng)這個(gè)參數(shù)為 true 時(shí)，表明即使當(dāng)前組件銷毀時(shí)，也繼續(xù)監(jiān)控 actions 里面的函數(shù)調(diào)用，可選
 */
userStore.$onAction((args) => {
    args.after(() => console.log("args.after", "===="));
    console.log("args", args);
}, true);