为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第24天 vue基础入门(下)| (24)3-9 VueX 的语法详解(3)

标签:
Vue.js vuex

这篇文章可以入选评委评选的最佳手记吗?期待ing…

模块名
描述
课程名称
前端工程师2022版
课程章节
vue基础入门(下)
打卡知识进程
知识进程:24 / 26
(22)3-7 VueX 的语法详解(1)
(23)3-8 VueX 的语法详解(2)
(24)3-9 VueX 的语法详解(3)
X(25)3-10 CompositionAPI 中如何使用 VueX
X(26)3-11 使用 axios 发送ajax 请求
主讲老师
Dell
学习开始时间
2022.11.17 07:24
学习结束时间
2022.11.17 08:19
总计时
55 min
课程收获

我们始终围绕是什么+为什么+怎么用
来输出所学收获
(1)是什么:
VueX(叉)的约束是什么?使用流程/步骤是什么?我能复述吗?
(2)怎么玩:
写法参考demo示例。
学习感受/感想/领悟(心得)
渐入佳境 +7。与25天打卡失之交臂。

主要内容:
----------------------good start----------------------

在VueX(叉)里面有一个潜移默化,或者说本质上的一个约束是什么?
mutation里面只允许‍‍写同步代码,不允许写‍‍异步代码,虽然它不强制的限制你说你写了就给你报错,但实际上它的设计里面要求‍‍你的 mutation改数据这块不能有异步的操作。

那么如果我非得有异步的操作怎么办?
这个时候‍‍ action就有效了,action帮助我们做一件什么样的事情?

比如说我们代码就可以这么去写了,‍‍首先我就不去提交 commit 调用mutation了,
我去调用dispatch这个方法,发送一个叫做‍‍ change action出去,这个action会给到谁?

是不是这块action就接收到了:

接收到之后在这里‍‍我可以去写异步的操作,setTimeout,然后我写一个两秒,‍‍两秒之后去派发一个限制修改的请求,
这个请求会调用mutation,调用 mutation之后 mutation 再去改变代码,‍‍

这样的话我们就把异步操作放到actions里面来做了,mutation就是一个同步的逻辑,‍‍

回到页面上,我们再刷新,点击,一秒两秒还是会变成lee:

mutation就符合要求了,ta就没有异步的代码,只有同步的代码了。‍‍

所以在 Vue 里面去做 VueX(叉)的设计的时候,actions里面也一般会要求我们放一些异步的代码,‍‍而mutations里面放同步的代码。‍‍

这就是‍‍我们去使用 VueX(叉)的一个逻辑。

首先你怎么定义数据,在state里面定义数据。

如果你想对数据做修改怎么修改?‍‍
比如说一个异步的修改,
首先你调一个dispatch方法,‍‍你可以传一个change过去,

当然你除了传一个 action的名字,你还可以传它的一些数据,比如说‍‍我想把之前的 dell改成hello world,

我可以把hello world传过去,‍‍
那么在 actions里面我就可以接收到你传递过来的 payload,或者说你传递过来的叫一个str‍‍,

然后我隔两秒之后我要去触发修改,我触发修改的时候依然触发 change的修改,‍‍
然后我把 str 再往下带一层,
那么change也能接收到 str,

然后你可以把this点state点name直接改成这个str就可以了:

保存一下,我们回到页面上刷新,‍‍点击一秒两秒它会 有一个问题:

说 name closes the circle,我们看一下这块哪里写错了:

这样写就没有任何的问题。‍‍

我们可以再简化一下我们的代码,既然我们说第一个参数是store,‍‍那么下面我就可以不用 this.commit了,我可以直接就store.commit,‍‍

然后上面我也可以不用this点state了,我直接用store点state点name等于str‍‍,

我们再回到页面上,刷新点击,一二,当然它说name of undefined:

这样写就对了:

modules 实际上是更复杂的一个对store进行局部拆分的一个功能点。

整体来回顾一下VueX(叉)的使用方式。‍‍
VueX(叉)实际上就是把‍‍整个应用里面要共用的一些数据存在这里面来,

首先我们要创建一个store,‍‍怎么创建?

通过createStore这个方法创建就行了,数据我们放在state里面去,当我放到state里面之后,‍‍在我的组件里面,我就可以通过计算属性,

直接通过this点到store点state获取到这些数据。‍‍

当然如果你想要改数据要怎么改呢?‍‍
首先你要定一个方法,当点击某些文字的时候,我要改数据,我怎么改?

第一步先派发一个action,你派发action‍‍叫做change这样一个名字的action,

这个action会被VueX(叉) store里面的actions接收到,‍‍
你派发了一个叫做change的action,那么change这个方法就会执行,

执行这里面写异步的逻辑,两秒之后‍‍我要想改数据了,怎么改数据?

我不能在action里面直接改,我必须要再派发一个commit这样的‍‍修改的请求,派发了叫做change的修改请求之后,‍‍

mutations会感知到change的请求,正好它有个change的方法就会执行,

这个方法执行的时候‍‍就会在这里面去直接改变state里的数据,也是只有mutations能改state里面的数据,‍‍

而且mutation必须是一个同步的代码。‍‍

如果说我现在想改数据不需要异步的操作,‍‍我可以怎么写?

我可以在这里就不写action了,我在这里也可以直接不写 despatch方法了,直接commit也可以。‍‍

commit一个change这样的请求里面带一个hello world,‍‍

这边也能去感知到你change的请求:

然后去‍‍感知到你传过来的 hello world 对数据做一个修改。

so,dispatch方法是和action做关联的,‍‍而commit这个方法 是和 mutation做关联的。

为什么要有这么复杂的一个数据流程?
是因为当我们去这么写数据修改的代码的时候,
我们可以‍‍把我们对数据修改的异步逻辑都封装在action里面去管理,‍‍
把对数据修改的同步逻辑都封装在mutations里面去管理。‍‍

当未来我们想查到底是哪里改了数据的时候,
我们直接到store里面去看mutation和action就可以了。‍‍

否则的话你对数据的修改会散落在各个的组件里面来。‍‍

这个时候我们想查到底是哪块改的代码,导致我的数据有问题,我们去查错的时候会变得很复杂。‍‍

所以虽然我们现在发现写法上比较复杂,但未来‍‍真正我们写完代码再去做维护的时候,
会发现用VueX(叉)的这种强制性的规范,‍‍写出了代码未来去做维护的时候会方便一些,更便捷一些。

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消