vuexdispatch和commit（vuex 中的 dispatch 和 commit 的使用）

dispatch 异步操作 this.$store.dispatch(‘actions的方法’，arg)； 调用 actions 里面的方法。

commit 同步操作 this.$store.commit(‘mutations的方法’，arg)；调用 mutations 里面的方法。

两个方法都是传值给vuex的mutation改变state

dispatch： 异步 操作，数据提交至 actions ，可用于向后台提交数据

this.$store.dispatch(’isLogin’,true);

commit： 同步 操作，数据提交至 mutations ，可用于登录成功后读取用户信息写到缓存里

this.$store.commit(’loginStatus’, 1);

注：必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功。

前言 我们称这些行为events(事件)，和响应callbacks(回调)。连续的事件流被称为event stream（事件流）。这些行为发生的速度不是我们能手动控制的。但是我们可以控制何时和如何激活正确的响应。有一些技术为我们提供精确的控制。

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(’action方法名’,值)

commit：同步操作，写法：this.$store.commit(’mutations方法名’,值)

commit: 同步操作

this.$store.commit(’方法名’,值)【存储】

this.$store.commit(’newBankName’, this.textValue)

this.$store.state.方法名【取值】

dispatch: 异步操作

this.$store.dispatch(’方法名’,值)【存储】

this.$store.getters.方法名【取值】

当操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成了。其他使用commit即可。

其他了解：commit=》mutations,用来触发同步操作的方法。dispatch =》actions,用来触发异步操作的方法。在store中注册了mutation和action，在组件中用dispatch调用action，然后action用commit调用mutation，

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

vuex适合用于多组件共享数据的情况，多个组件都能读，也都可以改。

vuex的执行流程：

安装

使用

vuex是一个插件，所以需要Vue.use

注册了vuex，我们就可以在vue里配置store了

getters

这里多了个配置getters，他可以看作是基于state的computed属性。使用的方式基本如下：

同时getters还可以配置成函数，方便我们动态传参，满足一些复杂一点的场景

调用

模块化store

随着项目迭代，需求的扩展，你的store会变得越来越臃肿，建议模块化拆分store

以上就是一些对象的拼装，但是模块要放到名为modules的属性内部，store的最终结构大致如下：

模块的命名空间默认模块的state、getter等属性都会合并到根级别，如果你希望模块有更好的封装性，避免多模块命名污染，可以配置上命名空间属性namespace:true

使用了模块命名空间后，action和getter内部常规用法只能访问本命名空间的dispatch，commit或者getter，如果要访问全局命名空间，需要使用额外的参数和配置：

模块动态注册

在 store 创建之后，你可以使用 $store.registerModule 方法注册模块

如果大多场景下，你的模块化store并不会被使用，只在你的业务流程页面中被用到，这时可以考虑在合适的生命周期节点（比如created）动态注册你的模块。同时要注意先检查模块是否已经被安装：$store.hasModule(moduleName)，避免重复注册模块，不然会出现逻辑问题。你也可以卸载自己的模块：$store.unregisterModule(moduleName)

官方文档

当我们创建一个 vuex 时候，也就是创建一个 store 实例。我们使用 vuex 其实也就是对 store 实例的使用

当我们使用 mutations 时，其实也就是在 store 实例上注册一个 mutation 。因为 mutation 处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），第二个参数可选。这也就是为什么我们可以 store.commit(’func’) 来调用相对应的 mutation 。

当我们使用 actions 时，其实也是在 store 上注册 action 。处理函数总是接受 context 作为第一个参数。关于 context 其实是个对象，包含以下属性：

这也是为什么我们可以使用 store.dispatch(’increment’) 来分发action。

当我们使用 store.dispatch(’increment’) 时，会在当前store实例上的 _actionSubscribers 数组中根据传入的 type 来遍历查找相对应的action来触发相对应的 mutation 。

而我们通过 commit 来遍历 _mutations 处理相对应的 mutation handler 。

Vuex有五个核心概念：

1、state：vuex的基本数据，用来存储变量(后四个属性都是用来操作state里面储存的变量的)。

2、getters：是对state里面的变量进行过滤的。

3、mutation:提交更新数据的方法，必须是同步的(如果需要异步使用action)。

4、action：和mutation的功能大致相同，不同之处在于：

            1.Action提交的是mutation，而不是直接变更状态。  也就是action是用来修改mutation并提交的  而  mutation是通过修改state

             2.Action可以包含任意异步操作。(一般比较复杂的数据都在action中操作)

             3.action先会执行异步操作再去调用mutation，随后才跟新state

5、modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。dispatch：是跟action一块用的，含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(’mutation的方法名’,获取值)

commit：是跟mutation一块用的，同步操作 ，写法： this.$store.commit(’mutation的方法名’,获取值)

dispatch：异步操作，commit ：同步操作

为什么dispatch是异步而commit是同步呢？

首先，dispatch是去分发一个action的。而commit则是去调用mutations的，那这两个玩意儿又有啥区别呢

action： 用于调用mutations去变更state。自身会返回一个promise，支持异步操作

mutations：修改数据，不支持异步，只是一个单纯的函数。

为什么action支持异步而mutations不支持异步呢？

因为如果mutations支持异步的话，那数据将会变得难以跟踪。因为异步存在着很多不确定性。你不知道数据啥时候返回，不知道成功与否。所以这也注定了mutations必须是个同步操作。但是当我们需要用到异步去获取数据提交数据的时候又该怎么办呢，action的出现就完美的解决了这些问题。所以action不能直接操作数据，他必须通过mutations去操作数据。但是他支持异步操作。所以这俩兄弟是相辅相成的。

回到上一个问题。正因为action支持异步，所以分发他的api dispatch也就是一个异步操作，而commit也就是一个同步操作了。

分发 action。options 里可以有 root: true，它允许在命名空间模块里分发根的 action。返回一个解析所有被触发的 action 处理器的 Promise

this.$store.dispatch 分发 actions-》 调用 mutations-》改变 states

mutation 有必须同步执行的限制，而 Action 不受约束，可以在 action 内部执行异步操作

store.dispatch 可以处理被触发的 action 的处理函数返回 Promise，并且 store.dispatch 仍旧返回 Promise

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行

都可以修改 state，并且也会触发视图的更新

commit 调用的是 vuex 中 mutation 里的方法，存在同步限制；而 dispatch 调用的数 vuex 中 action 里的方法，action 中可以调用 mutation 中的函数，也可执行异步操作

commit：同步操作

dispatch：异步操作