vue状态机（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 之间进行选择可能会造成混淆 。不过 ，这两个框架都非常适合管理状态应用程序 。本文简要比较了它们的特性 、功能和对代码的影响 。读完这篇文章后 ，也许你将能够找到适合你的库 。
⭐️ 好书推荐
《Vue.js 快速入门实战》
【内容简介】
Vue.js 快速入门实战以Vue.js的知识点为基础 ，结合TypeScript的使用 ，循序渐进地介绍了Vue.js 3.0（简称Vue3）的知识点和实战技巧 ，可以帮助零基础的读者掌握独立开发项目和部署项目上线的技术 。全书共14章 ，包括Vue.js概述 、搭建开发环境 、Vue.js组合式API 、Vue.js的模板语法 、Vue.js的计算属性和侦听器 、Vue.js中class和style的绑定 、Vue.js的表单开发 、Vue.js的组件开发 、Vue.js的网络请求 、Vue.js的状态管理 、Vue.js的路由管理 、Vue的项目部署 、在线招聘网站开发实战以及招聘网站后台管理系统开发实战 。
📚 京东自营购买链接：《Vue.js 快速入门实战》
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！