在 Vue 中，状态管理长期以来都基于 Vuex，这是一个集中存储应用程序所有组件的库。然而，Vue 生态系统最近的进步催生了 Vuex 的继任者 Pinia。
Pinia 提供了一种更轻量、模块化且直观的管理方法。它与 Vue 的反应系统和 Composition API 无缝集成，使开发人员可以轻松地以可扩展和可维护的方式管理和访问共享状态。
奠定基础：Pinia 与 Vuex
作为 Vue 应用程序中状态管理的参考库，Vuex 为应用程序的所有组件提供了集中存储。然而，随着 Vue 的进步，Pinia 代表了一种更现代的解决方案。让我们探讨一下它与 Vuex 有何不同。
API 差异 — Pinia 的 Composition API 提供了比 Vuex 更基础、更直观的 API，使得管理应用程序状态变得更容易。此外，它的结构与大多数 Vue 开发人员熟悉的 Vue Options API 非常相似。
类型支持——从历史上看，许多 Vue 开发人员一直在为 Vuex 有限的类型支持而 波兰商务电子邮件列表 苦苦挣扎。相反，Pinia 是一个完全类型化的状态管理库，可以消除这些问题。其类型安全有助于防止潜在的运行时错误，有助于提高代码可读性，并促进更平滑的扩展功能。
反应性系统——这两个库都利用了 Vue 的反应性系统，但 Pinia 的方法更符合 Vue 3 的组合 API，尽管反应性 API 很强大，但管理大型应用程序中的复杂状态可能是一个挑战。幸运的是，Pinia 简单而灵活的架构使您可以轻松管理 Vue 3 应用程序中的状态。 Pinia 的存储模式允许您定义存储来管理应用程序状态的特定部分，从而简化其组织并在组件之间共享。
轻量级特性 — Pinia 仅 1KB，可以无缝集成到您的开发环境中，其轻量级特性可以提高应用程序的性能和加载时间。
如何使用 Pinia 建立 Vue 项目
要将 Pinia 集成到 Vue 项目中，请使用 Vue CLI 或 Vite 初始化您的项目。项目初始化后，您可以使用npm或yarn作为依赖项来安装Pinia。
使用 Vue CLI 或 Vite 创建一个新的 Vue 项目。接下来，按照提示设置您的项目。
// Using Vue CLI
vue create my-vue-ap
// Using Vite
npm create vite@latest my-vue-app -- --template vue
将目录更改为新创建的项目文件夹：
cd my-vue-app
将 Pinia 安装为项目中的依赖项。
// Using npm
npm install pinia
// Using yarn
yarn add pinia
在主输入文件（通常是main.js或main.ts）中，导入 Pinia 并告诉 Vue 使用它：
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');
在 Vue 项目中安装并配置 Pinia 后，您就可以定义和使用存储来进行状态管理。
如何在 Pinia 创建商店
该商店是 Pinia 支持的 Vue 应用程序中状态管理的支柱。它可以帮助您以连贯且协调的方式管理整个应用程序的数据。存储是您定义、保存和管理应用程序的不同组件将共享的数据的地方。
这种集中化至关重要，因为它构建和组织应用程序的状态更改，使数据于调试。
此外，Pinia 中的存储不仅仅可以存储状态：Pinia 中包含的功能允许您使用操作更新状态并使用 getter 计算派生状态。这些内置函数有助于提高代码库的效率和可维护性。
以下示例说明了在项目的src/store.js文件中创建基本 Pinia 商店。
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
},
getters: {
doubleCount: (state) => state.count * 2,
},
});
