这篇文章可以入选评委评选的最佳手记吗？期待ing…
✔（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 请求 |
|
我们始终围绕是什么+为什么+怎么用 来输出所学收获 （1）是什么： VueX（叉）的约束是什么？使用流程/步骤是什么？我能复述吗？ （2）怎么玩： 写法参考demo示例。 |
|
主要内容：----------------------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（叉）的这种强制性的规范，写出了代码未来去做维护的时候会方便一些，更便捷一些。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
