pinia和vuex进行数据持久化的方法（附源码）

一、在 Pinia 中实现数据持久化

可以通过插件 pinia-plugin-persistedstate 轻松实现。以下是具体步骤和配置方法：

---

1. 安装插件

npm install pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstate

---

2. 注册插件到 Pinia

在 main.ts 中初始化 Pinia 并注册持久化插件：

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

// 创建 Pinia 实例并注册插件
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

const app = createApp(App)
app.use(pinia)
app.mount('#app')

---

3. 配置 Store 的持久化

在定义 Store 时，通过 persist 选项启用持久化功能。以下是两种常见写法：

选项式 API 写法

import {
    defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
   
  state: () => ({
   
    token: '',
    userInfo: {
    name: '张三', age: 25 }
  }),
  actions: {
   
    setToken(token: string) {
   
      this.token = token
    }
  },
  // 启用持久化配置
  persist: true
})

组合式 API 写法

import {
    defineStore } from 'pinia'
import {
    ref } from 'vue'

export const useUserStore = defineStore('user', () => {
   
  const token = ref('')
  const userInfo