pinia持久化的几种方式

### Pinia 持久化方法实现方式

#### 使用 `pinia-plugin-persistedstate` 插件

为了简化持久化的配置过程，通常会使用第三方插件来处理。`pinia-plugin-persistedstate` 是一个常用的解决方案。

在项目初始化阶段，通过修改 `main.js` 文件完成插件注册：

import { createApp } from 'vue'
import App from './App.vue'
// 导入 pinia 及其持久化插件
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)

// 创建 pinia 实例并挂载插件
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

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

此代码片段展示了如何正确设置插件以确保全局范围内都能访问到持久化的功能[^4]。

对于不同的平台（如 Web 或者小程序），只需调整具体的存储 API 即可满足需求。例如，在微信小程序环境中应采用 `uni.setStorageSync()` 和 `uni.getStorageSync()` 替代标准浏览器环境下的 `localStorage.setItem()` 和 `localStorage.getItem()` 函数[^1]。

#### 手动实现持久化逻辑

除了借助外部工具外，还可以直接在 Store 定义里加入自定义的动作来进行更精细的状态保存与恢复工作。下面是一个简单的例子说明这一过程：

export const useMainStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
      // 将最新的计数值存入本地缓存
      uni.setStorageSync('count', JSON.stringify(this.count))
    },
    initializeCount() {
      try {
        const savedCountStr = uni.getStorageSync('count') || null;
        if (savedCountStr !== null) {
          this.count = parseInt(savedCountStr, 10);
        }
      } catch (e) {}
    },
  },
})

上述代码段中包含了两个主要的操作：一个是每当调用 `increment` 方法时自动同步最新值至本地；另一个是在应用程序加载初期尝试从本地获取之前存在的记录以便还原初始状态[^5]。