摘要：本文将为初学者介绍如何在 Vue 项目中使用 Pinia，并对比 Pinia 与 Vuex 之间的主要区别。通过本教程，您将学会如何使用 Pinia 创建和管理状态，以及如何在您的 Vue 应用程序中实现更简洁、更易于维护的状态管理。
安装 Pinia
安装 Pinia 的最新版本：
yarn add pinia
或者使用 npm
npm install pinia
基本概念
在开始之前，我们需要了解 Pinia 的一些基本概念：
- Store：存储仓库，用于管理状态、动作和异步操作。
- State：状态，存储组件的数据，可以被多个组件共享。
- Actions：动作，用于执行异步操作并更新状态。
创建 Pinia store
接下来，我们创建一个 Pinia store。在 src/store 目录下新建一个名为 counter.ts 的文件，并添加以下内容：
import { defineStore } from 'pinia'
interface CounterState { count: number }
export const useCounterStore = defineStore('counter',
{ state: (): CounterState => ({ count: 0, }),
getters: { doubleCount(): number { return this.count * 2 }},
actions: {
increment() { this.count++ },
decrement() { this.count-- },
asyncIncrement() {
setTimeout(() => {
this.increment() }, 1000)
}
}
}
)
在这个例子中，我们定义了一个简单的计数器 store。它有一个状态（count），一个计算属性（doubleCount），以及三个动作（increment、decrement 和 asyncIncrement）。
我们也可以将counter搞成模块化定义,在目录下建立子目录modules把counter.ts放入modules并在store目录下建立index.ts文件
index.ts内容如下:
const store = createPinia()
//这里将在下一节讲如何用Pinia的插件特性来将插件数组添加进pinia实例
export default store
设置 Pinia 现在我们需要设置 Pinia。在 src/main.ts 文件中，引入 Pinia 并将其添加到 Vue 应用中：
import { createApp } from 'vue'
import store from './store'
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.mount('#app')
使用 Pinia store
在 Vue 组件中，我们可以使用 useCounterStore
来获取 store 的实例，并访问状态、计算属性和动作。例如，在 src/components/Counter.vue 文件中：
<template>
<div>
<h2>计数器示例</h2>
<p>当前计数: {{ count }}</p>
<p>双倍计数: {{ doubleCount }}</p>
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
<button @click="asyncIncrement">异步增加</button> </div>
</template>
<script setup lang="ts">
import { useCounterStore } from '@/store/counter'
const counterStore = useCounterStore()
const { count, doubleCount, increment, decrement, asyncIncrement } = counterStore </script>
总结
在这篇文章中，我们学习了如何在 Vue 3 + TypeScript 项目中使用 Pinia 作为状态管理工具，并使用了 setup 语法糖。与 Vuex 相比，Pinia 为 Vue 3 提供了更好的 TypeScript 支持，同时具有更简洁的 API 和更轻量级的体验。
当然，根据项目需求选择状态管理工具至关重要。对于大型复杂项目，Vuex 仍然是一个强大且成熟的解决方案。然而，如果你正在寻找一个简单、轻量级且易于使用的状态管理库，那么 Pinia 是一个值得尝试的选择。
