uniapp ts使用pinia持久化

uni-app 中使用 Pinia 和 Vuex 进行状态管理并实现数据持久化的步骤如下：

安装依赖：首先需要在项目中安装 Vue.js 的官方状态管理模式 Vuex 和 Pinia。你可以通过 npm 或者 yarn 来安装：
npm install vue@next pinia vuex-persistedstate
登录后复制

创建 Pinia store：在 src/store 目录下创建一个名为 store.ts 的文件，导入 Pinia 并配置你的 state、getters、actions 和 mutations：
import { createStore } from '@vue/pinia'
import { persistStore, autoPersist } from 'vuex-persistedstate'

export const store = createStore({
id: 'your-store-name',
state() {},
getters: {},
actions: {},
mutations: {}
})
登录后复制

设置存储插件：为了实现数据持久化，我们需要启用 vuex-persistedstate 插件，并将其连接到 Pinia store 上。在 main.ts 或 main.js 中：
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import persistedState from 'vuex-persistedstate'

persistedState(store)

// 如果你想自动保存状态，在 store 初始化时添加以下代码
// 注意这会立即保存当前的状态
autoPersist({
key: 'pinia-storage', // 自定义存储键名
storage: window.localStorage,
})

const app = createApp(App)
app.use(store)
// ...其他组件注册等

app.mount('#app')
登录后复制

处理数据同步：在需要将数据从 store 保存到本地（如用户离开页面前）和从本地恢复到 store（如重新加载应用时）的地方，可以调用相应的 getter 获取数据然后手动触发 mutation 进行操作。