Vue3 + Pinia 持久化存储

import { defineStore } from 'pinia'
import { useLocalStorage } from '@vueuse/core'
 
// 定义一个持久化存储的pinia store
export const usePersistedStore = defineStore({
  id: 'persisted',
  state: () => ({
    // 你的状态属性
    counter: 0
  }),
  actions: {
    increment() {
      this.counter++
    }
  },
  // 使用pinia插件进行状态持久化
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'counter',
        storage: useLocalStorage
      }
    ]
  }
})
 
// 在Vue组件中使用
import { usePersistedStore } from './path/to/store'
 
export default {
  setup() {
    const store = usePersistedStore()
 
    // 使用store中的状态和动作
    return {
      counter: computed(() => store.counter),
      increment: store.increment
    }
  }
}

这个例子展示了如何在Vue3和Pinia中创建一个可以持久化存储状态的store。useLocalStorage是VueUse库提供的一个函数，用于在localStorage中读写值。通过定义persist选项，我们可以让Pinia自动处理状态的序列化和反序列化，从而实现状态的持久化存储。在组件中，我们通过usePersistedStore来使用这个store，并可以通过计算属性来访问状态，以及通过调用动作来更改状态。