在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（叉）的这种强制性的规范，
写出了代码未来去做维护的时候会方便一些，更便捷一些。
原文始发于微信公众号（基根奋斗营）：【Vue】VueX 的语法详解（3）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/103775.html
