【Vue】VueX 的语法详解（3）

在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（叉）的这种强制性的规范，‍‍写出了代码未来去做维护的时候会方便一些，更便捷一些。