测试一下Pinia,Vuex 要出局了?
作者:Emil Hein
译者:前端小智
来源:betterprogramming
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
自从我开始使用Vue 3和组合API以来,我也尝试使用 Pinea 作为状态管理库。如果是从是 vue2 和 vuex 过来的,就会觉得用起来差别还是很大的。
说实话,我对 Vuex 使用还是很不适应。最初,有 "很多 "的模板代码,只是让 store 使用减少。不过,状态管理确实给我们带来了遍历,特别是每当我们有一小块应该跨组件共享的状态时,就会更倾向于使用它。
我们先来看看 Vuex 和 Pinia 的整体设计以及它们之间的区别是什么。
Vuex
下面是Vuex工作原理的官方图示,刚开始学习时,一看就很懵,不过当用过时开发过项目时,一看就就能懂了。
在 Vuex store(仓库)中,有4个主要组件。
1. State
这只是一个包含实际状态的对象。我们可以在开发工具中看到这个状态,如果想保留这个状态用于缓存或其他目的,也可以保存这个对象。
2. Actions
Actions 是执行异步任务的函数。它们是由关键字dispatch
发起的。
Actions 通常会请求一个外部 API 或做一些其他的异步工作。它还负责调用适当的 mutation
来实际改变状态。这说明 actions 本身并没有改变状态,而是 commit
变化,让 mutation 来改变状态。
3. Mutations
Mutation 是唯一会真正同步改变状态的函数。Mutations 使用关键字commit
。
4. Getters
Getters可以被认为是计算过的属性,应该被用来从状态中获得一个修改过的响应。
一个简单的Vuex store 的例子如下所示:
const store = createStore({state: {count: 0},mutations: {increment (state) {state.count++}},actions: {increment (context) {context.commit('increment')}}
})
使用 store
在处理上述问题时,一个组件通常会调用dispatch
来启动异步任务(比如从外部API中获取)。如果需要改变状态,比如一个简单的计数器,可以调用 commit
。
这意味着一个组件可以通过调用dispatch
或commit
来与 store
进行交互。我不知道你怎么想,但对我来说,这增加了一些心智负担,而我真的不需要。
在使用Vuex之前,我对 “commit” 和 “dispatch” 这两个术语并不熟悉。由于这个原因,用它们来改变状态对我来说并不直观。对于一些人来说,这可能是不同的,但这让我觉得使用 action
或 mutation
都有点不舒服。
另外值得注意的是,使用Vuex,一个组件可以访问整个 store,尽管在逻辑上将 Vuex store 分成不同的文件。
Pinia
与Vuex相比,Pinia的工作原理图如下:
整体架构比 Vuex 更简单,更容易理解。一个Pinia store 有3个主要组成部分:
1. State
与Vuex的定义一样。
2. Actions
这里的 Actions 与Vuex中的 Actions 和 mutations 的工作相同。这些函数是改变状态的唯一方式。如果想从外部API获取数据并更新状态,也可以使用 actions 。
与Vuex设置的另一个区别是,Pinia actions 是普通函数,心智负担比 vuex 小很多。
3. Getters
getter 完全等同于 Store 状态的计算属性
一个简单的Pinia store 的例子如下所示:
export const useStore = defineStore('main', {state: () => ({counter: 0,}),actions: {increment() {this.counter++}},
})
使用
如果有多个模板, Vuex 一般采用 modules
方式,这就需要在 store/index.ts
中将所有的 modules
通过 creaeStore
注册到 store
中,那么Pinia 就省去了这些麻烦,createPinia()
即可,不需要注册 modules
,没有任何参数,所以连 store/index.ts
都可以不用了,直接在main.ts
中添加即可, 这一点会比Vuex简洁很多
import { createPinia } from 'pinia'
app.use(createPinia());
# main.tsimport { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'const app = createApp(App)
app.use(createPinia())app.mount('#app')
总结
就目前而言,我想说Pinia更容易理解和使用。也许有一些东西可以让Vuex在更大的项目中更好地扩展,但我还没有遇到过这种情况。
对我来说,另一件重要的事情是,我们可以用正常的参数调用 actions 的正常方法。
Pinia还支持Vue 2和3的开箱即用,这使得迁移变得更加容易。
优势
最后也在总结一下 Pinia 优势:
- Vue2 和 Vue3 都支持
- 更小,只有1KB
- 不需要嵌套模块,符合Vue3的Composition api,让代码更加扁平化
- 抛弃了Mutations的操作,只有state、getters和actions.极大简化了状态管理库的使用完整的TypeScript支持
- 代码更加简洁,可以实现很好的代码自动分割
Pinia还有很多的用户和细节,请转官方文档Home | Pinia (vuejs.org)
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原谅:https://betterproramming.pub/testig-pinia-is-vuex-out-43e0531824f5
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
测试一下Pinia,Vuex 要出局了?相关推荐
- VB100年底测试:McAfee金山遗憾出局 瑞星表现令人意外
[51CTO.com独家报道]2010年12月,VB100杀软测试成绩出炉.本次参与测评的几个中国杀软表现迥异,新兴的可牛和360通过,老牌的金山和瑞星被打小黑叉.其中金山和国外厂商McAfee都因为 ...
- pinia和vuex的区别
文章目录 介绍 安装 pinia安装 vuex安装 创建 pinia创建 vuex创建 两者写法对比 pinia在vue3中的写法和用法 vuex在vue3中的写法和用法 Vuex 和 Pinia 的 ...
- 这一次,彻底入门前端测试,覆盖单元测试、组件测试(2.4w 字)
前端测试一直是前端工程化中很重要的话题,但是很多人往往对测试产生误解,认为测试不仅没有什么用而且还浪费时间,或者测试应该让测试人员来做,自己应该专注于开发.所以,文章开头会先从"软件工程语境 ...
- 测试大咖漫谈测试人职业发展
[本文作者介绍]思寒,资深测试架构师,霍格沃兹测试学院校长,开源自动化测试工具 AppCrawler 作者,有 10 余年软件测试开发经验,曾任职于阿里巴巴,百度.雪球等公司. 有不少测试同学反馈,2 ...
- 转行软件测试两年了,听大神说测试前途是IT里最low的,我慌了......
一.2021年软件测试行业的发展现状以及未来的前景趋势 最近很多同学在找工作的时候,明显的会发现功能测试很难找到工作,即使有,也是外包,甚至外包都要求会性能或者自动化测试.所以对于纯手工测试,不好找工 ...
- 软件测试工程师规划需要学什么技能?资深测试分析总结......
目录:导读 前言 一.Python编程入门到精通 二.接口自动化项目实战 三.Web自动化项目实战 四.App自动化项目实战 五.一线大厂简历 六.测试开发DevOps体系 七.常用自动化测试工具 八 ...
- 思寒漫谈测试职业发展
编者按 :年底了,又到了回顾一年成长和规划新年计划的节点! **2019 你过得好吗? 2020 又有哪些新的期许?**相信有不少测试同学正在各种压力下,陷入了对未来测试职业发展的迷茫.今天就一起重温 ...
- 测试工程师职业发展漫谈【乐搏TestPRO】
应不少同学的要求,通过本文分享下对测试工程师职业发展的看法,话题较大,不敢随便乱写,抛砖引玉,供大家参考. 1.测试行业发展背景 微软引领的大测试时代 中国最早的对 IT 工程的启蒙和测试定位的探索大 ...
- 金九银十,为期2周的前端面经汇总(初级前端)
HTML h5语义化标签以及作用 header :头部 nav:导航 article:内容 section:块级 aside:侧边栏 footer:尾部 好处: 1.去掉或者丢失样式的时候能够让页面呈 ...
- vue3使用vite+setup+ts写一个初级前端项目
Vue3vite+setup+ts项目总结 项目说明 项目概述 本项目纯粹是为了学习和巩固刚学的vue3组合式api和语法糖,再加上网上流行vite+ts+vue,所以便有了这个历时四天的vue3前端 ...
最新文章
- ios微信支付失败 php,iOS 微信支付疑难杂症。
- (五)Docker查看容器ip及指定固定IP
- 基于nodejs实现本地网页服务器-实现手机测试电脑开发的移动端网页
- c++ 按行读取txt文件并赋值_python操作txt文件中数据教程[3]python读取文件夹中所有txt文件并将数据转为csv文件...
- Java开发笔记(六十九)泛型类的定义及其运用
- 软件测试书单/书籍推荐(整理更新中)
- springboot办公用品采购领用管理系统java
- gatk过滤_「简化基因组」如何过滤用GATK分析得到的SNP
- html字幕精灵图标,视频加字幕精灵
- 【python】cannot import name ‘Imputer‘ from ‘sklearn.preprocessing‘ 解决办法
- 厚基础Linux——第七周作业
- 10款堪称神器的免费电脑软件推荐
- 在unik中,写一个Go HTTP服务器
- html页面初始化代码,使用DW制作网页,如何初始化代码
- hpuoj 1725: 感恩节KK专场——特殊的比赛日期 (素数判断)
- SLCP验厂辅导,企业在认证之后便可以将经验证过后的数据信息分享给其它各托管平台
- Java 后端开发常用的第三方服务 TOP10
- 基于ssm+mysql的javaee微博博客系统,Java实现类似新浪微博网站、朋友圈分享系统
- 企业月结快递管理教程
- 盒子加内边距和变宽的溢出问题
热门文章
- 【批处理DOS-CMD命令-汇总和小结】-注册表编辑命令reg,如何用cmd命令打开注册表编辑器regedit
- How-to: 利用Web Camera模拟Windows Phone 7的重力加速度传感器
- python下载需要花钱吗,python下载要钱多少钱
- 32位x86处理器编程架构
- 电脑可以连接网络,但是无Internet访问权限问题排查
- NodeJS实现HTTP/HTTPS代理 - 刘春龙的博客
- fiddler提示the system proxy was changed,Click to reanable capturing.导致无法抓包
- 下载Python编辑器Thonny教程
- CI/CD---使用新版云效流水线自动部署Java项目
- 怎样以两种方式从Mac计算机上的启动板菜单中删除应用程序?