位置: IT常识 - 正文

Vue.js 状态管理:Pinia 与 Vuex(vuex状态机)

编辑:rootadmin
Vue.js 状态管理:Pinia 与 Vuex 💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】

推荐整理分享Vue.js 状态管理:Pinia 与 Vuex(vuex状态机),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue的状态改变方式,vue状态管理相关的面试题,vuex状态管理几种状态,vue.js状态管理工具,状态管理vuex,vuex状态管理几种状态,vue.js状态管理工具,vue.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的特点模块Vue.js 状态管理:Pinia 与 Vuex(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 快速入门实战》

本文链接地址:https://www.jiuchutong.com/zhishi/300750.html 转载请保留说明!

上一篇:【数据挖掘】-支持向量机(SVM)+代码实现(数据挖掘论文选题)

下一篇:前端开发工程师简历(前端开发工程师是干嘛的)

  • 佳能mp288怎么加墨水(佳能mp288怎么安装墨盒)

    佳能mp288怎么加墨水(佳能mp288怎么安装墨盒)

  • aumal20是什么型号(aum al20)

    aumal20是什么型号(aum al20)

  • ctrl+f5的功能是什么(ctrl +f5)

    ctrl+f5的功能是什么(ctrl +f5)

  • 面容id无法录入(面容id录不进去)

    面容id无法录入(面容id录不进去)

  • jbl音响充电充不进去一直闪(jbl音响充电指示灯不亮)

    jbl音响充电充不进去一直闪(jbl音响充电指示灯不亮)

  • 抖音直播要规定多久吗(抖音直播规定每天要播吗)

    抖音直播要规定多久吗(抖音直播规定每天要播吗)

  • 笔记本最大内存多少(笔记本最大内存多少GB)

    笔记本最大内存多少(笔记本最大内存多少GB)

  • 华为手机忘了密码怎么解(华为手机忘了密码怎么解锁)

    华为手机忘了密码怎么解(华为手机忘了密码怎么解锁)

  • 认证蓝v有什么用(蓝v认证是终身还是一年)

    认证蓝v有什么用(蓝v认证是终身还是一年)

  • 华为P40防水吗(华为p60防水级别)

    华为P40防水吗(华为p60防水级别)

  • 短信回复退订有危险吗(短信回复退订有什么影响)

    短信回复退订有危险吗(短信回复退订有什么影响)

  • 共享位置能听见说话吗(共享位置能听到对方声音吗)

    共享位置能听见说话吗(共享位置能听到对方声音吗)

  • 苹果1t融合硬盘是什么(苹果1t融合硬盘怎么用)

    苹果1t融合硬盘是什么(苹果1t融合硬盘怎么用)

  • 苹果11怎么拍照(苹果11怎么拍照显示拍摄时间)

    苹果11怎么拍照(苹果11怎么拍照显示拍摄时间)

  • 如何解决微信发图慢(如何解决微信发视频压缩问题)

    如何解决微信发图慢(如何解决微信发视频压缩问题)

  • macbook和air的选哪个(macbook air 和macbook)

    macbook和air的选哪个(macbook air 和macbook)

  • 泡泡充电怎么退押金(泡泡充电收费标准)

    泡泡充电怎么退押金(泡泡充电收费标准)

  • 腾讯二维码在哪里打开(腾讯二维码在哪找出来)

    腾讯二维码在哪里打开(腾讯二维码在哪找出来)

  • 如何取消耳机自动播放(如何取消耳机自动播放音乐)

    如何取消耳机自动播放(如何取消耳机自动播放音乐)

  • 魅族16s的手势截屏在哪(魅族16spro手势操作)

    魅族16s的手势截屏在哪(魅族16spro手势操作)

  • msi是什么主板(msi主板是什么意思)

    msi是什么主板(msi主板是什么意思)

  • 苹果手机怎么设置时间(苹果手机怎么设置壁纸)

    苹果手机怎么设置时间(苹果手机怎么设置壁纸)

  • 怎么看特别关心有几个(怎么看特别关心qq)

    怎么看特别关心有几个(怎么看特别关心qq)

  • 电话停机了怎么办(电话停机了怎么知道号码)

    电话停机了怎么办(电话停机了怎么知道号码)

  • 使用Vue+Vuex+CSS3完成管理端响应式架构模板实战(使用筷子就餐会不会传染乙肝病毒)

    使用Vue+Vuex+CSS3完成管理端响应式架构模板实战(使用筷子就餐会不会传染乙肝病毒)

  • Vue页面路由参数的传递和获取(vue 路由)

    Vue页面路由参数的传递和获取(vue 路由)

  • hostid命令  用来打印当前主机的数字化标识(hostnamectl命令)

    hostid命令 用来打印当前主机的数字化标识(hostnamectl命令)

  • vue如何处理防止按钮重复点击问题(vue加载时如何避免出现代码)

    vue如何处理防止按钮重复点击问题(vue加载时如何避免出现代码)

  • 房产税计税依据是什么
  • 季度费用支出怎么做
  • 兼职劳务报酬需要发票吗
  • 金税盘纳税申报流程
  • 可以抵扣的税控发票
  • 增值税出口退税政策
  • 产品售后维修产品介绍
  • 外出经营许可证办理流程
  • 销售货物的运费增值税计入什么科目
  • 办公楼贷款比例
  • 售楼部垃圾桶
  • 发生销售折扣如何做账
  • 从事非学历教育的学校提供的教育服务免征增值税吗
  • 补交以前年度工会经费所得税如何申报
  • 购进商品用于样品赠送的账务处理
  • 工程部物品领用表格模板
  • 创建上市公司
  • 帮客户采购会计分录
  • 超市预付卡过了还能退吗
  • 税前扣除是好事吗
  • 废旧物资回收企业税收管理
  • win10删除所有内容是什么意思
  • 利用Windows Media将二进制文件转音频
  • win11系统更新卡在25%
  • mac怎么连接蓝牙鼠标
  • 设备计提折旧的方法
  • 企业对外捐赠的税法处理
  • 个体户开劳务费发票需要交哪些税
  • 鸿蒙系统快捷键
  • 使用linux命令
  • mdn php
  • uni app
  • 桌面美化神器
  • macbookprofacetime
  • 固定资产财产损失的账务处理
  • 当月认证了发票但没有进行增值税申报
  • kpk是什么文件
  • 进口的应税消费品,于报关进口时缴纳消费税
  • 废旧物资经营单位增值税税率
  • pytorch with no grad
  • 公司是否可以开具在职证明
  • php自动加载函数
  • 根据银行回单做流水账单
  • 存货跌价准备科目余额在哪方
  • python poetry如何创建项目
  • 税前扣除的支出
  • 收入总额是什么意思
  • 增值税专用发票的税率是多少啊
  • 公司一年的账目怎样算
  • 销售人员的销售额是工作绩效的重要指标
  • 租赁业发票
  • 个贷系统平账专户A户付款会计分录
  • 最新的会计规定出台时间
  • 事业单位收个人所得税吗
  • 企业利润分配的内容
  • 收回已转销的应收账款而恢复的坏账准备
  • 收到进项发票不认证抵扣的会计分录
  • 房地产核算成本方法
  • 预付账款怎么做账务处理
  • sql group by语句
  • mac不用密码
  • win7系统打不开网络和共享中心
  • win8系统如何查看电脑内存
  • windows的服务怎么打开
  • 苹果mac系统怎么更新
  • linux源于
  • centos6.9
  • windows7宽带连接断开怎么办
  • perl数组元素个数
  • jquery根据name获取对象数组
  • node.js使用教程
  • jquery 动态绑定click事件
  • listview提高效率
  • js 表格
  • JavaScript isPrototypeOf和hasOwnProperty使用区别
  • android软件开发实例
  • 郑州二套房契税征收2023标准是多少
  • 光伏电站电力监控系统
  • 衰竭期矿山开采的矿产品减征幅度
  • 进口非应税消费品的组成计税价格为
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设