持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21，点击查看活动详情juejin.cn/post/714765…

今天接着给大家介绍vuex的五大核心之actions和modules

store.commit({
   type:'incr',
   count:3
})

mutations:{
    incr(state,payload){//payload接收到的是整个对象
        state.num+=payload.count
    }
}

mutation也遵循vue的响应规则：

• 1、改变数组长度和以下标形式更改 数组元素，监听不到数据的变化。
• 2、给state的对象添加属性也监听不到数据的变化。
• 在多人协作的大型应用中，可以使用常量替代Mutations事件类型，使用常量的时候那么就用[ ]把变量括起来。

mutation必须是同步函数。

• 如果在它里面做异步操作，并且是在异步函数里修改状态，通常都是等不到异步结果mutations已经结束了。这时候view也不会再监听对应的mutation了，而且控制台也会有提示，是不允许这样操作的。

Action

怎么能监听到把异步的结果拿回来了？

答：那就使用actions

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
• store对象作为了actions里的方法的参数（即context） 具体步骤：

1、先在组件里派发action 接下来在actions里异步请求，dispatch（）里的字符串就是actions里的函数名，派发action之后，就会在actions里找对应函数。异步请求回来结果之后，commit mutations

mapActions的映射和mapMutations是一样的用法

• 可以给actions里的函数设置返回值为一个promise对象，这样的话就知道该函数具体什么时候结束。
• actions里的函数的返回值作为了dispatch（）的返回值返回来了。
• 组合actions：先分发actionB，在actionB里继续分发actionA，结合async函数，等actionA函数有了结果之后，才能执行actionB里的commit。

那么如何在actionB里dispatchactionA呢？

actions里的每个函数都接受一个参数context，对它进行解构，可以结构出来dispatch和commit。利用这个dispatch分发action

modules

modules作用：模块化。把整个大的store拆开成小的store，然后把小的store全都放到大的store里。用来合并小模块store。小的store是一个单独的js文件，然后暴露，在大的store里进行引入。

model的命名空间

不要在发布环境下启用严格模式。

如果想实现input与store里的数据双向绑定，要通过@input或者change事件，this.$store.commit(input事件名，传参（该参数时e.target.value）)，在mutations里接收