Vuex - Mutation-Action一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

- mutations: 同步方法,更新数据的方法,

更改vuex中store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中修改store中的状态进行改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法store.commit

第一种方式

Mutation用于修改变更$store中的数据
 // 同步方法
    mutations: {
        inc(state,n){
            state.number += n
            // console.log(state.number) 
        }
    },
    
    
mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

第二种方式

import { mapMutations } from 'vuex'

methods:{
  ...mapMutations(['add'])
}

import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

commit方法，当方法执行的时候会通过commit来触mutations里面的方法进行数据的修改
mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面，页面的数据也会发生改变

注意，在mutations中不能编写异步的代码，会导致vue调试器的显示出错。在vuex中我们可以使用Action来执行异步操作。

- actions: 异步方法,调用mutations 中的方法, 更新state 数据;

action类似于mutation，不同的是action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。(不是直接变更状态，可以包含任意异步操作)在页面中如果我们要嗲用这个action，则需要执行store.dispatch

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

第一种方式

// 异步方法
    actions: {
        AsyncIne({commit,state},n){
            console.log(n) 
            // this.$store.commit(),
            setInterval(()=>{
                commit('inc',20)
                console.log(state.number)
            },2000)
        }
    }

第二种方式

import { mapActions } from 'vuex'

methods:{
  ...mapMutations(['subAsync'])
}


import { mapState,mapMutations,mapActions } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      },
      //获得mapActions映射的addAsync函数
      ...mapActions(['subAsync']),
      asyncSub(){
          this.subAsync(5);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

Mutation和Action之间的区别是什么

流程顺序

“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation

角色定位

基于流程顺序，二者扮演不同的角色

Mutation：专注于修改State，理论上是修改State的唯一途径
Action：业务代码、异步请求限制
角色不同，二者有不同的限制
Mutation：必须同步执行
Action：可以异步，但不能直接操作State