在 Vue 3【1】 中使用 Pinia【2】 和 TypeScript【3】 管理状态：代码实践与指南
随着前端技术的发展，Vue 3 作为新一代的 Vue 框架，以其出色的性能和灵活性受到了广泛关注。在 Vue 3 中，Pinia 是一个现代化的状态管理【4】库，它提供了简洁、可预测的状态管理解决方案。结合 TypeScript，我们可以编写更加健壮和易于维护的代码。本文将围绕如何在 Vue 3 中使用 Pinia 和 TypeScript 管理状态展开，通过一系列的代码示例，带你深入了解这一主题。
在 Vue 3 中，Pinia 是一个轻量级的状态管理库，它旨在提供一种简单、直观的方式来管理组件的状态。与 Vuex 相比，Pinia 的设计更加现代化，它使用 Composition API【5】，使得状态管理更加灵活和易于理解。而 TypeScript 则是一种静态类型语言，它可以帮助我们在编译时捕获错误，提高代码的可维护性。
准备工作
在开始之前，请确保你的开发环境已经安装了以下工具：
- Node.js【6】 和 npm【7】/yarn【8】
- Vue CLI【9】 或 Vite【10】
- TypeScript
以下是一个使用 Vue CLI 创建的 Vue 3 项目示例：
bash
vue create my-vue3-pinia-app
cd my-vue3-pinia-app
vue add typescript
安装 Pinia
在项目中安装 Pinia：
bash
npm install pinia
或者使用 yarn：
bash
yarn add pinia
创建 Pinia Store【11】
在 Vue 3 中，Pinia Store 是一个简单的 JavaScript 对象，它包含状态和操作状态的方法。下面是一个简单的 Store 示例：
typescript
// src/stores/user.ts
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
name: '',
age: 0,
}),
actions: {
setName(name: string) {
this.name = name;
},
setAge(age: number) {
this.age = age;
},
},
});
在这个 Store 中，我们定义了两个状态 `name` 和 `age`，以及两个操作这些状态的 `action` 方法。
在组件中使用 Pinia Store
现在，我们可以在 Vue 组件中使用这个 Store。我们需要在组件中导入 Store：
typescript
// src/components/UserProfile.vue
User Profile
Name: {{ user.name }}
Age: {{ user.age }}
Set Name to John
Set Age to 30
Comments NOTHING