### 如何在 UniApp
Vue3 项目中使用
Pinia 实现状态管理
#### 创建并初始化
Pinia Store
为了使
Pinia 能够正常工作，在 `main.js` 文件中需要引入必要的依赖项，并设置好应用实例以便能够访问到
Pinia 提供的状态管理功能[^2]。
```
javascript
// main.js
import { createSSRApp } from &#
39;
vue&#
39;;
import App from &#
39;./App.
vue&#
39;;
// 导入
Pinia 及其插件用于持久化存储
import { create
Pinia } from &#
39;
pinia&#
39;;
import { createUnistorage } from &#
39;
pinia-plugin-unistorage&#
39;;
export function createApp() {
const app = createSSRApp(App);
// 创建一个新的
Pinia 实例
const
pinia = create
Pinia();
// 使用 unistorage 插件来启用持久化特性
pinia.use(createUnistorage());
// 将
Pinia 注册至应用程序上下文中
app.use(
pinia);
return { app };
}
```
这段代码展示了如何通过调用 `create
Pinia()` 方法创建一个
Pinia 实例，接着利用 `.use()` 方法挂载上持久化插件 `
pinia-plugin-unistorage`，最后再把整个
Pinia 库注册给
Vue 应用程序实例以备后续组件内调用[^4]。
#### 定义 State 和 Actions
定义 store
中的数据结构以及操作这些
数据的方法。通常会在单独文件夹下按照业务逻辑划分多个 stores 文件，这里仅展示最基础的例子：
```typescript
// src/stores/counterStore.ts
import { defineStore } from &#
39;
pinia&#
39;;
export const useCounterStore = defineStore(&#
39;counter&#
39;, {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
decrement() {
if (this.count > 0) {
this.count--;
}
}
}
});
```
上述 TypeScript 版本的代码片段说明了怎样基于 `defineStore` 函数构建名为 `&#
39;counter&#
39;` 的 store 对象，其中包含了初始状态 (`state`) 和改变该状态的动作 (`actions`)[^1]。
#### 组件内部获取 Store
数据
当完成了以上准备工作之后，就可以很方便地在一个或多个组件里读取共享的状态或是触发相应的 action 更新它们了:
```html
<template>
<div class="example">
Count is {{ counter }}
<button @click="increment">Increment</button>
<button :disabled="!canDecrement" @click="decrement">Decrement</button>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from &#
39;
vue&#
39;;
import { useCounterStore } from &#
39;../stores/counterStore&#
39;;
const counterStore = useCounterStore();
let counter = ref(counterStore.count);
function increment() {
counterStore.increment();
}
const canDecrement = computed(() => counter.value !== 0);
function decrement() {
counterStore.decrement();
}
</script>
```
在这个例子中，模板部分绑定了按钮点击事件处理器去执行增减计数器的操作；而在 `<script>` 部分，则是从之前定义好的 `counterStore` 获取当前数值并通过
响应式的变量绑定到了视图层面上显示出来。
扫一扫
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
