为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第24天 vue基础入门(下)|...

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

2022.11.17 08:39 250浏览

这篇文章可以入选评委评选的最佳手记吗?期待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人点赞

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

评论

作者其他优质文章

正在加载中
Python工程师
手记
粉丝
19
获赞与收藏
93

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消