uniapp 设置pinia
时间: 2025-07-02 12:43:10 浏览: 11
### 如何在 UniApp 中设置 Pinia 状态管理
#### 安装依赖包
为了能够在 UniApp 项目中使用 Pinia 进行状态管理,需要先通过 npm 或 yarn 来安装 `pinia` 和其插件。对于持久化存储的需求,则可以额外安装相应的插件。
```bash
npm install pinia pinia-unistorage
```
或者
```bash
yarn add pinia pinia-plugin-unistorage
```
#### 创建应用实例并初始化 Pinia
在项目的入口文件 `main.js` 中创建 Vue 应用实例的同时也需初始化 Pinia 实例,并将其挂载到应用程序上。这里展示了 SSR (服务端渲染) 的场景下如何操作[^2]:
```javascript
// main.js
import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';
import { createUnistorage } from 'pinia-plugin-unistorage';
export function createApp() {
const app = createSSRApp(App);
const store = Pinia.createPinia();
// 使用 unistorage 插件实现数据持久化
store.use(createUnistorage());
app.use(store);
return {
app,
Pinia, // 将 Pinia 返回以便后续可能的服务端逻辑处理
};
}
```
如果是在普通的单页应用(SPA),则可以直接调用 `createApp()` 替代上述例子中的 `createSSRApp()` 函数来构建应用实例。
#### 配置持久化选项
为了让某些特定的状态能够被保存下来,在定义 Store 的时候可以通过配置项指定哪些属性应该被持久化。下面是一个简单的例子说明了这一点[^3]:
```typescript
// stores/counterStore.ts
import { defineStore } from 'pinia'
import piniaPersist from 'pinia-plugin-persist-uni'
const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
}
})
useCounterStore().$persist({
key: 'my-counter-store',
storage: localStorage,
})
```
需要注意的是,这里的 `$persist` 方法来自 `pinia-plugin-persist-uni` 插件,它允许开发者自定义要保存的数据键名以及使用的浏览器内置 Storage API 类型(如 sessionStorage 或者 localStorage)。这一步骤确保即使页面刷新之后仍然能恢复之前的状态。
#### 导出默认的 Store 对象
最后一步就是导出已经配置好的 Pinia Store 给整个应用使用。通常情况下只需要简单地返回即可[^4]:
```javascript
// store/index.js
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist-uni'
const store = createPinia()
store.use(piniaPersist)
export default store;
```
这样就完成了在一个标准的 UniApp 工程里集成 Pinia 并启用持久化功能的过程。
阅读全文
相关推荐



