npm安装pinia持久化插件

Pinia 是 Vue 3 中的一个官方状态管理模式，它本身并不内置持久化功能。不过，你可以通过配合 Vuex ORM、Vuex-persistedstate 或者其他的本地存储库（如 localStorage 或 IndexedDB）来实现 Pinia 中数据的持久化。以下是使用 vuex-persistedstate 的示例：

首先，你需要安装 `vuex-persistedstate` 和对应的本地存储库库（假设是 `vue-local-storage`）：

npm install vuex-persistedstate vue-local-storage

然后，在创建 Pinia store 时，导入并配置 vuex-persistedstate：

import { createStore } from 'pinia'
import { persistState } from 'vuex-persistedstate'
import localstorage from 'vue-local-storage'

// 配置 localStorage 作为存储策略
localstorage.use()

const appStore = createStore({
  id: 'app',
  plugins: [
    // 添加 persistedState 插件
    persistState({
      key: 'your_key', // 自定义键名，用于区分 Pinia 存储的数据
      storage: localstorage,
      transform: state => JSON.stringify(state), // 将状态转换为字符串存储
      load: ({ dispatch }) => {
        // 初始化数据，可以在这里恢复之前保存的状态
        const storedData = localStorage.getItem('your_key')
        if (storedData) {
          dispatch({ type: 'loadData', payload: JSON.parse(storedData) })
        }
      },
    }),
  ],
})

在需要加载或保存数据的地方，添加相应的 action:

export const actions = {
  async loadData({ commit }) {
    // 加载数据
    const data = await fetchDataFromServer() // 假设这是一个异步函数获取远程数据
    commit('setData', data)
  },
  saveData({ commit }, newData) {
    // 保存数据
    commit('setData', newData)
    localStorage.setItem('your_key', JSON.stringify(newData))
  },
}

现在，Pinia store 中的数据会在应用关闭后自动保存到本地，再次打开时会尝试从本地恢复。