Pinia 与 Vuex 一样，是作为 Vue 的“状态存储库”，用来实现 跨页面/组件 形式的数据状态共享。它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。
当该数据、方法在很多地方都需要使用或需要通过页面保存的数据，如显示在导航栏中用户信息，一个多步骤表单页面等，这时我们就可以使用Store了。
Pinia 的主要特点：
- 简单易用：Pinia 的 API 简洁明了，易于学习和使用。它提供了一些基本的操作方法，如设置状态、获取状态、删除状态等。
- 适用于 Vue 3：Pinia 是专门为 Vue 3 设计的，它充分利用了 Vue 3 的新特性，如 Composition API、Teleport 等。
- 可扩展性：Pinia 是一个可扩展的状态管理库，你可以根据自己的需求来添加更多的功能和操作方法。
- 持久化支持：Pinia 支持状态持久化，你可以轻松地将状态保存到本地存储中，并在需要时恢复状态。
- 插件化：Pinia 支持插件化，你可以通过插件来添加更多的功能，如日志记录、状态监控等。
如何使用：
- 安装 Pinia：使用 npm 或 yarn 安装 Pinia 库。
- 创建存储：在 Vue 应用中创建一个存储对象，用于存储所有共享状态。
- 设置状态：使用 defineState 方法来定义状态，并使用 setup 方法将状态注入到组件中。
- 操作状态：使用 useStore 钩子函数来获取存储对象，并使用其提供的方法来操作状态。
- 持久化状态：使用 persist 插件来将状态保存到本地存储中，并在需要时恢复状态。
1.安装
npm install pinia
2.定义
/ stores/counter.js
import { defineStore } from 'pinia'
//defineStore 接受一个 id，不同数据源的 id 必须是不同的
export const useCounterStore = defineStore('counter', {
//相当于data，数据
state: () => {
return { count: 0 }
},
//相当于methods，方法
actions: {
increment() {
this.count++
},
},
//相当于computed，计算属性
getters: {
getCount(state) {
// 自动完成!
return state.count
},
},
})
在上面的代码中，我们通过 defineStore 方法创建了一个名为 counter 的 Store。其中，id 是一个唯一的标识符，可以用来跨 Store 之间进行通信。
在 Store 中，我们定义了一个名为 count 的状态，以及名为 increment 的操作。这个操作可以通过 this 来访问当前 Store 中的状态，从而实现对状态的变更。
我们还定义了一个名为 getCount 的 getter，它可以返回 count 的值。
参数：
-
state：状态的初始值，推荐使用的是一个 箭头函数，方便进行类型推断。
-
getters：状态的获取，是一个对象格式；推荐配置为每个 getters 的对象属性为 箭头函数，方便进行类型推断；在使用时等同于获取该函数处理后的 state 状态结果；并且与 Vue 的计算属性一样，该方法也是惰性的，具有缓存效果。
-
actions：类似 Vue 中的 methods 配置项，支持异步操作，主要作用是 处理业务逻辑并更新状态数据；另外，此时的 actions 是一个 函数集合对象，与 getters 不同的是 不建议使用箭头函数。并且函数内部的 this 就指向当前 store 的 state。
3.使用
然后你在一个组件中使用它：
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.count++
// 或使用 action
counter.increment()
<template>
{
{counter.getCount}}
</template>
在上面的代码中，我们通过 useCounterStore 方法获取到了 useCounterStore Store 的实例。然后我们可以通过 counter.count 访问到当前 Store 中的状态，以及通过 counter.increment() 和 counter.getCount() 来调用相应的操作。
pinia和vuex的对比
| 特性 | Vuex (Vue2) | Pinia (Vue3) |
|---|---|---|
| 数据存储 | State 存储在 Store 中 | State 存储在 Store 中 |
| 数据修改 | commit/mutation | action |
| 响应式 | 使用 Vue 响应式系统实 | 使用 Vue 3 的响应式系统实现 |
| 数据获取 | getters | getters |
| 模块化 | 模块按照功能划分，每个模块有自己的 state、mutation、action 和 getter | 模块按照功能划分，每个模块有自己的 state、action 和 getter |
| TypeScript 支持 | 需要额外安装 @vue/cli-plugin-typescript 插件，并在 store 中进行类型定义 | 内置 TypeScript 支持，使用起来更加方便 |