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

import { defineStore } from 'pinia'
import { persist } from 'pinia-plugin-persistedstate'
 
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
  // 使用 persist 插件进行数据持久化
  persist: {
    enabled: true, // 启用持久化
    strategies: [
      {
        key: 'counter-state', // 本地存储的键名
        storage: localStorage, // 使用 localStorage 存储数据
      },
    ],
  },
})
 
// 创建并使用 store 实例
const useCounterStore = defineStore('counter')
// 使用 store 中的 state 和 actions
const { count, increment } = useCounterStore()

这段代码定义了一个名为 counter 的 Pinia store，并通过 pinia-plugin-persistedstate 插件使其状态可以被持久化。当 store 被创建时，如果之前存在持久化的状态，它将被恢复。用户可以通过 increment action 来增加计数器的值，并且这个变化会被持久化，即使刷新页面或关闭浏览器，计数器的数值也不会丢失。