Vue.js 状态管理：Pinia 与 Vuex

💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】
🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】

在这里插入图片描述

- Pinia 和 Vuex 简介
- - 什么是Pinia？
  - 什么是 Vuex？
- Pinia 的特点
- - 模块化设计
  - 完整的开发工具支持
  - Pinia 很直观
  - Pinia 是可扩展的
  - TypeScript 支持
  - Pinia 轻量的
- Vuex的特点
- - 模块
  - 开发工具支持
  - 热重载
  - TypeScript 支持
  - Pinia和Vuex的代码对比
- Pinia 和 Vuex 的优缺点
- - Pinia 的优点
  - Pinia 的缺点
  - Vuex 的优点
  - Vuex 的缺点
- 我应该使用哪个：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 快速入门实战》