Pinia 如何在 Vue 3 项目中进行安装和配置？

以下将详细介绍 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 项目中的安装、配置，并且可以开始使用它来管理应用的状态了。