1. 什么是Pinia 

Pinia 主要用于管理跨组件的状态。在 Vue 应用中，组件之间可能需要共享数据（如用户信息、购物车列表等），而 Pinia 提供了一个全局的存储空间，方便这些数据的共享和管理。

2. Pinia 的核心概念

• Store（仓库）

  • Store 是 Pinia 的核心概念，它是一个包含状态（state）、动作（actions）和可选的 getters 的对象。

  • 每个 Store 都是一个独立的模块，可以被多个组件使用。

  • State（状态）：存储应用的全局数据，例如用户的登录信息、主题颜色等。

  • Getters（获取器）：类似于 Vue 的计算属性，用于派生状态。例如，根据购物车中的商品数量计算总价。

  • Actions（动作）：用于处理异步操作或修改状态。例如，从 API 获取数据并更新状态。

3.为什么Pinia更适合Vue3

• 简洁易用

  • Pinia 的 API 设计简洁，代码量更少，学习曲线更平缓。

  • 它利用了 Vue 3 的 Composition API，使得状态管理更加直观。

• 类型支持

  • Pinia 提供了良好的 TypeScript 支持，能够自动推断类型，减少类型声明的工作量。

• 模块化设计

  • Store 是模块化的，可以轻松拆分和组合，便于维护和扩展。

• 与 Vue 3 深度集成

  • Pinia 与 Vue 3 的 Composition API 无缝集成，可以直接在 setup 函数中使用。

4.pinia的使用

我们使用一个小的计数案例来实现，当点击增加的时候，页面进行同步的更新。

4.1安装pinia

首先在当前文件的终端下面输入指令----- npm install pinia

如果package.json文件存在pinia的版本，说明已经下载成功

4.2.创建文件

在src文件下创建store文件夹里面创建一个counter的js文件

4.3.编写counter文件

import {defineStore} from 'pinia'

/**
 * 创建一个计数器存储，用于管理计数状态和相关操作
 * @returns {CounterStore} 返回包含状态、计算属性和动作的计数器存储实例
 */
export const useCounterStore = defineStore('counter', {
    /**
     * 初始化状态对象
     * @property {number} count - 当前计数器值，初始值为0
     */
    state: () => ({
        count: 0
    }),
    /**
     * 计算属性集合
     * @property {number} doubleCount - 返回当前计数器值的两倍
     */
    getters: {
        doubleCount: (state) => state.count * 2
    },
    /**
     * 状态变更方法集合
     */
    actions: {
        /**
         * 使计数器值自增1
         */
        increment() {
            this.count++
        }
    }
})

这段代码通过 Pinia 的 defineStore 方法定义了一个名为 counter 的存储实例 useCounterStore。它包含一个初始值为 0 的状态 count，一个计算属性 doubleCount 用于返回 count 的两倍，以及一个动作 increment 用于将 count 的值加 1。

详细讲解

1. 导入 defineStore 方法： defineStore 是 Pinia 提供的一个方法，用于定义一个存储（Store）。Pinia 是 Vue.js 的官方状态管理库，类似于 Vuex，但更简洁、更现代。

2. 定义并导出 useCounterStore：defineStore 接收两个参数：

   1. 'counter'：这是存储的唯一标识符（ID），用于区分不同的存储。在 Pinia 中，每个存储都需要一个唯一的名称。

   2. 配置对象：包含状态（state）、计算属性（getters）和动作（actions）的定义。状态（state）在这里，我们定义了一个属性 count，它的初始值是 0。状态是响应式的，这意味着当 count 的值发生变化时，Vue 会自动更新相关的视图。

state 是一个函数，返回一个对象，定义了存储的状态。

getters 是一个对象，用于定义计算属性。计算属性是基于状态的派生值，当状态发生变化时，计算属性也会自动更新。

actions 是一个对象，用于定义可以改变状态的方法。在这里，我们定义了一个动作 increment，它的作用是将 count 的值加 1。动作方法可以通过 this 访问状态和计算属性。

也就是说先用state定义一个状态，然后action里面定义的嗯我们是可以改变状态的方法。我们状态改变的时候，getters里面的计算属性。根据定义的计算属性结合状态的修改进行自动的更新。

4.4.在组件中使用Store

<script setup lang="ts">
/**
 * 使用Pinia存储模块中的计数器Store
 * 用于管理页面中的计数状态和相关操作
 */
import {useCounterStore} from "@/store/counter.ts"

/**
 * 创建计数器Store实例
 * 提供对count状态值、doubleCount计算属性和increment方法的访问
 */
const counter = useCounterStore()
</script>

<template>
    <!-- 页面主要容器 -->
    <div>
        <!-- 显示当前计数值 -->
        <p>数字：{{ counter.count }}</p>
        <!-- 显示计数值的两倍计算结果 -->
        <p>两倍：{{ counter.doubleCount }}</p>
        <!-- 点击按钮触发计数递增操作 -->
        <button @click="counter.increment">点我加一</button>
    </div>
</template>

<style scoped>
/* 本组件专属样式（当前未定义） */
</style>

        

这段代码意思为从 @/store/counter.ts 文件中导入 useCounterStore。调用 useCounterStore，创建一个名为 counter 的存储实例。

在模板中使用存储：

•         显示 count 的值。
•         显示 doubleCount 的值。        
•         提供一个按钮，点击时调用 increment 方法，将 count 的值加 1。

4.5.注册pinia组件

在main.ts文件中

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

5页面展示

当点击加一的时候，数字和两倍会同时更新

6.总结

Pinia 是 Vue 3 的官方状态管理库，它通过简洁的 API 和良好的类型支持，为 Vue 应用的状态管理提供了更高效、更易用的解决方案。