vue3实现pinia持久化

在Vue 3中实现Pinia持久化的方法如下[^1]：

1. 首先，安装`pinia`和`pinia-persist`插件：

npm install pinia pinia-persist

2. 在Vue应用的入口文件（通常是`main.js`）中导入和使用`pinia`和`pinia-persist`：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createPersist } from 'pinia-persist'

const app = createApp(App)

const pinia = createPinia()
const persist = createPersist(pinia, {
  // 配置持久化存储的键名和存储方式
  // 可以选择localStorage或sessionStorage
  // 这里以localStorage为例
  storage: window.localStorage,
  key: 'pinia',
})

app.use(pinia)
app.use(persist)

app.mount('#app')

3. 在需要持久化的Pinia模块中使用`persist`装饰器：

import { defineStore } from 'pinia'

export const useMyStore = defineStore('myStore', {
  state: () => ({
    // 定义需要持久化的状态
    count: 0,
  }),
  actions: {
    // 定义操作状态的方法
    increment() {
      this.count++
    },
  },
  persist: persist(), // 使用persist装饰器
})

通过以上步骤，你就可以在Vue 3中实现Pinia的持久化了。持久化的状态将会在页面刷新后仍然保留。