以下将详细介绍 Pinia 在 Vue 3 项目中的安装和配置步骤：
1. 安装 Pinia
你可以使用 npm 或者 yarn 这两种常见的包管理工具来安装 Pinia，具体命令如下：
使用 npm 安装
在项目根目录下打开终端，执行以下命令：
npm install pinia
使用 yarn 安装
同样在项目根目录的终端中运行：
yarn add pinia
2. 配置 Pinia
安装完成后，需要在 Vue 3 项目中对 Pinia 进行配置，以下是详细的配置过程：
2.1 创建 Pinia 实例
在项目中创建一个用于配置 Pinia 的文件，通常可以命名为 store/index.js 或者 store/index.ts（如果你使用 TypeScript）。在这个文件里创建并导出 Pinia 实例，示例代码如下：
JavaScript 版本
// store/index.js
import {
createPinia } from 'pinia';
const pinia = createPinia();
export default pinia;
TypeScript 版本
// store/index.ts
import {
createPinia } from 'pinia';
const pinia = createPinia();
export default pinia;
2.2 在 Vue 应用中使用 Pinia
在项目的入口文件（通常是 main.js 或者 main.ts）中引入并使用创建好的 Pinia 实例，示例如下：
JavaScript 版本
// main.js
import {
createApp } from 'vue';
import App from './App.vue';
import pinia from './store/index';
const app = createApp(App);
// 使用 Pinia 实例
app.use(pinia);
app.mount('#app');
TypeScript 版本
// main.ts
import {
createApp } from 'vue';
import App from './App.vue';
import pinia from './store/index';
const app = createApp(App);
// 使用 Pinia 实例
app.use(pinia);
app.mount('#app');
3. 创建和使用 Store
完成上述配置后，就可以开始创建和使用 Pinia 的 store 了。以下是一个简单的计数器 store 示例：
3.1 创建 Store
在 store 目录下创建一个新的文件，例如 counter.js 或者 counter.ts，用于定义计数器 store，示例代码如下：
JavaScript 版本
// store/counter.js
import {
defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
// 定义状态
state: () => ({
count: 0
}),
// 定义获取器
getters: {
doubleCount: (state) => state.count * 2
},
// 定义动作
actions: {
increment() {
this.count++;
}
}
});
TypeScript 版本
// store/counter.ts
import {
defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0 as number
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++;
}
}
});
3.2 在组件中使用 Store
在 Vue 组件中引入并使用创建好的 store，示例如下：
<template>
<div>
<p>Count: {
{ counterStore.count }}</p>
<p>Double Count: {
{ counterStore.doubleCount }}</p>
<button @click="counterStore.increment">Increment</button>
</div>
</template>
<script setup>
import { useCounterStore } from '../store/counter';
const counterStore = useCounterStore();
</script>
通过以上步骤，你就完成了 Pinia 在 Vue 3 项目中的安装、配置，并且可以开始使用它来管理应用的状态了。
