Vue3 官方推荐状态管理库Pinia
介绍
Pinia 是 Vue 官方团队推荐代替Vuex的一款轻量级状态管理库，允许跨组件/页面共享状态。
Pinia 旨在提供一种更简洁、更直观的方式来处理应用程序的状态。
Pinia 充分利用了 Vue 3 的 Composition API。
官网：
Pinia符合直觉的 Vue.js 状态管理库
Pinia的核心概念
store：是存储状态（共享数据）的地方。- 是一个保存状态和业务逻辑的实体。它承载着全局状态。
- 每个组件都可以读取/写入。
- 官方推荐使用 hooks 的命名方式，以
use开头。例如：useCountStore、useUserStore，useCartStore，useProductStore。
state：是 store 中用于存储应用状态的部分。- 通俗来讲，
state是真正存储数据的地方，它就是存放在store里的数据。 - 官方要求
state写成函数形式，并且要return一个对象。
示例：state() { return {} }
- 通俗来讲，
getters：从存储的状态中派生数据，类似于 Vue 中的计算属性（computed）。- 是一种依赖于 store 状态并产生计算值的函数。这些值将被缓存，直到依赖的状态改变。
actions：是用于改变状态的方法。
安装与配置 Pinia
- 通过npm或yarn安装Pinia：
npm install pinia
# 或者使用 yarn
yarn add pinia
- 在Vue应用文件中（通常是
main.js或main.ts），引入并使用Pinia：
// 引入 createApp 用于创建实例
import {
createApp } from 'vue';
// 引入 App.vue 根组件
import App from './App.vue';
// 从 Pinia 库中引入 createPinia 函数，用于创建 Pinia 实例
import {
createPinia } from 'pinia';
// 创建一个应用
const app = createApp(App)
// 创建 Pinia 实例
const pinia = createPinia();
// 将 Pinia 实例注册到 Vue 应用实例中，使得整个应用可以使用 Pinia 进行状态管理
app.use(pinia);
// 挂载整个应用到app容器中
app.mount('#app')
通过以上步骤，成功地在 Vue 项目中集成了 Pinia 状态管理库，为应用提供了集中式的状态管理功能，可以在组件中通过使用 Pinia 的 store 来管理和共享数据。
此时开发者工具中已经有了pinia选项：
Store
Store 是一个保存状态和业务逻辑的实体。它承载着全局状态。
定义Store
Pinia 使用 defineStore 定义Store。
import {
defineStore } from 'pinia'
// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCountStore = defineStore('count', {
// 其他配置...
})
defineStore()
- 第一个参数（store 的 ID）
- 这是一个字符串，用于唯一标识一个 store。
defineStore('count', {})中的count就是这个store的ID。 - 必须传入， Pinia 将用它来连接 store 和 devtools。
- 这是一个字符串，用于唯一标识一个 store。
- 第二个参数（配置对象）
- 可接受两类值：Setup 函数或 Option 对象。
- 这个对象包含了 store 的各种配置选项，主要有以下几个重要属性：
state、actions、getters。
Option Store
与 Vue 的选项式 API 类似，可以传入一个带有 state、actions 与 getters 属性的 Option 对象。
export const useCountStore = defineStore('count', {
state: () => ({
count: 0 }),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
},
})
可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。
Setup Store
与 Vue 组合式 API 的 setup 函数 相似，可以传入一个函数，该函数定义了一些响应式属性和方法，并且 return 一个带有需要暴露出去的属性和方法的对象。
import {
defineStore } from "pinia";
export const useCountStore = defineStore('count', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
// 把要在组件中使用到的属性、方法暴露出去
return {
count, doubleCount, increment }
})
在 Setup Store 中：
ref()就是state属性computed()就是gettersfunction()就是actions
注意，要让 pinia 正确识别 state，你必须在 setup store 中返回 state 的所有属性。这意味着，你不能在 store 中使用私有属性。不完整返回会影响 SSR ，开发工具和其他插件的正常运行。
使用 Store
虽然定义了一个 store，但在使用