uniapp使用pinia怎么存

### 在 UniApp 中使用 Pinia 进行状态管理与存储数据的方法 Pinia 是 Vue 3 的官方状态管理库，它在设计上更加灵活且易于使用。以下是关于如何在 UniApp 中使用 Pinia 进行状态管理并存储数据的详细说明。 #### 1. 安装 Pinia 和持久化插件 首先需要安装 Pinia 和持久化插件 `pinia-plugin-persistedstate`，以实现状态的持久化存储。 ```bash npm install pinia pinia-plugin-persistedstate ``` #### 2. 配置 Pinia 并启用持久化插件 在项目的入口文件（如 `src/main.js` 或 `src/main.ts`）中配置 Pinia，并加载持久化插件。 ```javascript // src/main.js import { createPinia } from 'pinia'; import persist from 'pinia-plugin-persistedstate'; const pinia = createPinia(); pinia.use(persist); // 使用持久化插件 export default { install(app) { app.use(pinia); // 注册 Pinia 到应用实例 }, }; ``` #### 3. 创建 Store 并定义状态与操作 创建一个 Store 文件（如 `src/stores/member.js`），定义 `state`、`getters` 和 `actions`。 ```javascript // src/stores/member.js import { defineStore } from 'pinia'; import { useLocalStorage } from '@vueuse/core'; export const useMemberStore = defineStore('member', { state: () => ({ // 使用 useLocalStorage 实现本地存储 user: useLocalStorage('pinia/member/user', null), token: useLocalStorage('pinia/member/token', ''), }), getters: { isLoggedIn: (state) => !!state.token, // 判断是否登录 }, actions: { login(data) { this.user = data.user; this.token = data.token; }, logout() { this.user = null; this.token = ''; }, }, }); ``` #### 4. 使用 Store 在组件中管理状态 在组件中通过 `useMemberStore` 访问和修改状态。 ```vue <template> <div> <p v-if="isLoggedIn">欢迎，{{ user.name }}！</p> <button @click="handleLogin">登录</button> <button @click="handleLogout">退出</button> </div> </template> <script> import { useMemberStore } from '@/stores/member'; export default { setup() { const memberStore = useMemberStore(); const handleLogin = () => { memberStore.login({ user: { name: 'Alice' }, token: 'abc123', }); }; const handleLogout = () => { memberStore.logout(); }; return { user: memberStore.user, isLoggedIn: memberStore.isLoggedIn, handleLogin, handleLogout, }; }, }; </script> ``` #### 5. 持久化存储的注意事项 为了确保状态能够正确持久化到本地存储中，可以使用 `pinia-plugin-persistedstate` 提供的选项进行配置[^2]。 ```javascript // src/stores/member.js import { defineStore } from 'pinia'; import persistedState from 'pinia-plugin-persistedstate'; export const useMemberStore = defineStore( 'member', { state: () => ({ user: null, token: '', }), actions: { login(data) { this.user = data.user; this.token = data.token; }, logout() { this.user = null; this.token = ''; }, }, }, { plugins: [ persistedState({ storage: localStorage, // 默认为 localStorage paths: ['user', 'token'], // 指定需要持久化的字段 }), ], } ); ``` --- ### 注意事项 - 如果需要支持跨端（如小程序和 H5），可以考虑使用 `uni.setStorageSync` 和 `uni.getStorageSync` 替代 `localStorage`[^4]。 - 对于敏感数据（如 token），建议使用加密方式存储，避免直接暴露在本地存储中。 --- ### 示例总结 以上代码展示了如何在 UniApp 中使用 Pinia 管理状态，并结合 `pinia-plugin-persistedstate` 实现数据的持久化存储。通过这种方式，可以轻松地在不同页面或模块之间共享和持久化数据。 ---