### Pinia 快速上手教程
Pinia 是
Vue.js 的
状态管理库，被官方誉为
Vuex 的继任者。它提供了更简洁的 API 和更好的 TypeScript 支持，使得开发者可以轻松管理和共享组件之间的状态。
#### 安装 Pinia
要开始使用 Pinia，首先需要将其安装到项目中。可以通过 npm 或 yarn 来完成这一操作[^2]：
```bash
npm install pinia --save
```
或者如果你使用的是 Yarn，则运行以下命令：
```bash
yarn add pinia
```
#### 初始化 Pinia 实例
在
Vue 应用程序中初始化并注册 Pinia 需要在入口文件（通常是 `main
.js` 或 `main
.ts`）中执行如下代码：
```
javascript
import { createApp } from '
vue';
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app
.use(pinia)
.mount('#app');
```
这段代码创建了一个新的 Pinia 实例，并通过 `use()` 方法将其挂载到
Vue 应用实例上[^1]。
#### 创建 Store
Store 是用于存储应用状态的地方。你可以定义多个 store 文件来组织不同的功能模块。下面是一个简单的例子展示如何创建一个名为 `counter` 的 store：
```
javascript
// stores/counter
.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this
.count++;
},
decrement() {
this
.count--;
},
async fetchData() {
try {
const response = await fetch('/api/data'); // 使用异步请求获取数据
if (!response
.ok) throw new Error('Network response was not ok
.');
const data = await response
.json();
console
.log(data); // 处理返回的数据
} catch (error) {
console
.error('There has been a problem with your fetch operation:', error);
}
},
},
});
```
上述代码展示了如何定义初始状态以及一些基本的操作方法（actions）。值得注意的是，在 action 中可以直接利用
JavaScript 的 `async/await` 特性来进行异步编程[^3]。
#### 访问 State 和 Actions
一旦定义好了 store，就可以在任何地方访问它的状态和行为。例如，在组件内部这样调用：
```html
<template>
<div>
<p>Count is {{ counter
.count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore(); // 获取 store 实例
function increment() {
counter
.increment();
}
function decrement() {
counter
.decrement();
}
</script>
```
在这个模板里，我们绑定了按钮点击事件分别对应增加或减少计数器的动作。
---
###
订阅专栏 解锁全文
扫一扫
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
