Vue.js状态管理之Pinia与Vuex详解

前言

Vuex 和 Pinia 是用于管理 Vue.js 应用程序状态的标准 Vue.js 库。让我们比较一下他们的代码、语言、功能和社区支持。

如果没有合适的库，开发人员管理应用程序的状态可能会很困难。Vuex 和 Pinia 是标准的 Vue.js 库，用于处理应用程序中的条件。这两个库都非常适合状态管理，但是由于它们出色的特性和功能，选择哪个库用于你的项目需要时间并且令人沮丧。好吧，我们将在本文中看看为什么一个是最好的。

在本文中，我们将通过实际代码示例查看代码比较、它们的变体、功能，以及推荐使用哪一个来管理你的状态应用程序，以便更好地理解。我们还将考虑每个产品的语言、功能和社区支持。

Pinia 和 Vuex 简介

我将简要总结 Vuex 和 Pinia。如果你想要更详尽的解释，我建议阅读Vuex 文档和Pinia 文档。

什么是Pinia？

Pinia是一个新的状态管理库，可帮助你在 Vue.js 应用程序中跨组件管理和存储响应数据和状态。Pinia 由 Vue 核心团队成员之一 Eduardo San Martin Morote 创建。

Pinia 使用新的反应系统来构建一个直观且完全类型化的状态管理系统。

库中引入的新特性是促成 Pinia 推荐的因素之一。总体而言，Pinia 显得轻巧、简单且易于掌握。它拥有可以使 Vue 3 和 Vue 2 中的编程变得通用的一切。因此，这是试用 Pinia 的理想机会。

什么是 Vuex？

Vuex是一种状态管理模式和库，构建为集中式存储，可帮助你维护 Vue 应用程序中存在的所有组件的状态。Vuex 遵循确保你的状态突变为预测标准的规则。

使 Vuex 更强大的一个因素是组件从 Vuex store 中获取它们的状态，并且可以快速有效地响应 store 状态的变化。

Vuex虽然是维护你store的状态管理库，但建议你熟悉或搭建过大型SPA。如果你没有经验，Vuex 可能会冗长且令人生畏。

如果你的应用程序很广泛，你需要管理复杂的数据流，并且你有嵌套的组件，你可以使用 Vuex。查看官方文档以获取有关何时使用 Vuex 的更多信息。

Pinia 的特点

Pinia 和 Vuex 之间的区别之一是 Pinia 是“模块化设计”，换句话说，它被构建为拥有多个商店，而 Vuex 只有一个商店。在这些商店中，您可以拥有子模块。除此之外，Pinia 允许将这些模块中的每一个从他们的商店直接导入到需要的组件中。

模块化设计

如果您是一名 Vue 开发人员并且曾使用 Vuex 管理应用程序的状态，您会注意到 Vuex 只有一个商店。在该商店中，您可以在其中包含多个模块。使用 Pinia，您可以将这些模块中的每一个都存储在一个地方，并在需要时将它们直接导入到组件中。

此方法允许捆绑器自动对它们进行代码拆分，并提供更好的 TypeScript 推理。

完整的开发工具支持

Pinia 提供开发工具支持，以帮助您使用该库构建和轻松调试。当我们安装 Pinia 时，它会自动挂接到我们的 Vue.js 开发工具，并让我们跟踪对我们的商店所做的更改，这让我们在 Vue.js 版本（Vue 2 和 Vue3）中获得流畅的开发人员体验。

Pinia 很直观

Pinia 提供了一个简单的 API，使您的商店的编写变得简单且井井有条，就像创建组件一样。这意味着与 Vuex 解决方案相比，需要掌握的样板文件和概念更少。

Pinia 是可扩展的

Pinia 还提供了一个完整的插件系统，具有交易和本地存储同步等功能，适用于 Pinia 默认行为不足的情况。

TypeScript 支持

Pinia 提供比 Vuex 更好的 TypeScript 支持，具有 Javascript 自动完成功能，这使得开发过程变得简单。

Pinia 轻量的

Pinia 的重量只有 1 KB，因此很容易融入您的项目。这可能会提高您的应用程序性能。

Vuex的特点

模块

当您的应用程序扩展时，遍历变得很困难。但是，使用 Vuex 模块，您可以根据领域功能将您的商店拆分为多个文件，并从该特定命名空间中的模块访问状态循环。

开发工具支持

Vue devtools 中的 Vuex 选项卡允许我们查看状态并跟踪我们的变化。这使我们能够快速评估我们的程序如何执行和调试错误。

热重载

Vuex支持热重载功能，它使用 webpack 的热模块替换 API，可以在您开发时快速重载您的 mutations、modules、action 和 getters。

TypeScript 支持

如果你想编写一个 TypeScript 存储定义，Vuex 可以提供它的类型并且更容易实现。它有一个默认的 TypeScript 配置，不需要额外的设置。

Pinia和Vuex的代码对比

Pinia 是一个轻量级库，可帮助您管理整个应用程序的反应状态。与 Vuex 相比，Pinia API 易于学习，使您的代码更易于阅读。

让我们看一下使用 Pinia 和 Vuex 管理我们的状态的代码比较：

Vuex

在此示例中，我们将查看一个简单的 Vuex 存储，它跟踪待办事项列表项的状态：

import { createStore } from 'vuex'

const TodoListstore = createStore({
 state() {
   return {
     todoListItems: []
   }
 },
 actions: {
   addNewList({ commit }, item) {
   {
     commit('createNewItem', item)
   }
 },
 mutations: {
   createNewItem(state, item) {
     state.todoListItems.push(item)
   }
 }
})

如果你看上面的代码，你可以看到 Vuex 存储中的三个动作：状态、 动作和突变。状态返回当前的todoListItems，动作提交一个突变来创建一个新项目，最后，突变创建新项目并将其添加到列表中。当你构建一个更大的应用程序时，你可能会意识到动作和突变相对相似，导致冗余代码，因为每个状态变化都需要一个样板。

Pinia

使用 Pinia 简单 API，您可以消除突变和冗余代码。让我们查看一个代码示例，了解当您使用 Pinia 实现之前的代码时的样子：

import { defineStore } from 'pinia'

Export const useListStore = defineStore('list', {
 state() => ({
   return {
     todoListItems: []
   }
 }),
 actions: {
   addNewList() {  
     this.todoListItems.push(item)
   }
 }})

上面的示例是 Pinia API 在管理应用程序状态时如何工作的简单代码。使用 Pinia，我们删除了突变并将其直接更新到我们的动作中。

注意：在上面的代码示例中，当我们将项目直接提交给我们的操作时，我们不需要跟踪我们的项目。

Pinia 和 Vuex 的优缺点

Pinia 和 Vuex 是控制应用程序状态的优秀工具，但其中一个必须具有另一个所没有的某些功能。让我们来看看它们是什么。

Pinia 的优点

• Pinia 允许你在不重新加载页面的情况下修改你的商店。

• 它在 JavaScript 中提供 TypeScript 支持和良好的自动完成功能。

• Pinia 提供 devtool 支持，这有助于增强开发人员使用该工具的体验。

• Pinia 只有状态、吸气剂和动作。不需要突变。

• 使用 Pinia，你可以将状态存储在一个地方，并在请求时将其传递给它们的组件。

• 它是一个重量为 1 KB 的轻量级库。

• 它提供服务器端渲染支持和自动类型模块，无需额外工作。

• Pinia 兼容 Vue 2 和 Vue 3。

Pinia 的缺点

• 与 Vuex 相比，它没有庞大的社区支持和解决方案。

• Pinia 不支持调试功能，如时间旅行和编辑。

Vuex 的优点

• Vuex 有 mutations、getters 和 actions。

• 与 Pinia 相比，Vuex 的社区支持很大。

• Vuex 支持调试功能，如时间旅行和编辑。

Vuex 的缺点

• 它对 TypeScript 不友好。

• 你只能将其用于大型 SPA。

我应该使用哪个：Pinia 还是 Vuex？

好吧，这就是它变得更具挑战性的地方，因为仍然有一些项目需要使用 Vuex 来处理状态应用程序，即使 Pinia 是新推荐的状态管理库。它有几个 Vuex 没有的有价值的功能。

Vuex 仍然是构建大型 SPA 的理想解决方案，因为对于构建中小型应用程序的人来说，它相当冗长。

Pinia 也一样。尽管如此，如果你需要所有列出的功能，例如 devtool 支持、TypeScript 支持和状态应用程序的轻松管理，那么 Pinia 是最好的解决方案——它为你提供流畅的开发体验。

如果你正在构建一个不太复杂的应用程序，无论是中等到广泛的应用程序，你都可以使用 Pinia，因为它的重量约为 1 KB。

结论

由于功能多样，在管理应用程序状态时，在 Vuex 和 Pinia 之间进行选择可能会造成混淆。不过，这两个框架都非常适合管理状态应用程序。本文简要比较了它们的特性、功能和对代码的影响。读完这篇文章后，也许你将能够找到适合你的库。

来源：https://blog.csdn.net/qq_44273429/article/details/128932617