4、actions

在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务.

store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。

😆 OK！本节我们来学习使用Actions，Actions存在的意义是vuex作者假设你在修改state的时候有异步操作，作者不希望你将异步操作放在Mutations中，所以就给你设置了一个区域，让你放异步操作，你看看作者多么用心良苦啊，那既然人家都给我们了，那我们岂能有不用之理？

• 😑 对于文档开头的这句话，我不是很赞同，action应该是mutation的前一步，怎么是类似呢？action存在的意义就是执行异步操作，异步操作出结果后再去commit mutation的，明明是上下级关系，为什么说两者类似呢？所以不是很赞同。对于下面两句话，我是很赞同的，action的过程是执行异步操作，其终点就是提交mutation，能死它也触碰不到state。action就是处在这样一个位置。

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态state。
• Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

语法 调用 context.commit 提交一个 mutation， 或者通过 context.state 和 context.getters 来获取 state 和 getters。

 

😎 我们再看一下这张图，action的声明周期就是上面那一块，它在组件里被dispatch到，然后进入action，执行异步操作，异步操作(promise)总有一个结果的，出结果后再决定提不提交mutation，应该明白啦吧~

 

 😛 我们直接上一个代码，show you the code ~

1. 修改store/index.js

const store = new Vuex.Store({
  state:{
    loading: false,
    todoList : [
      {id:1,name:'11'},
      {id:2,name:'22'},
      {id:3,name:'33'},
    ],
    num: 0,
  },
  mutations:{
    setNumIs5(state){
      state.num = 5
    },
    setNumIsWhat(state,payload){
      state.num = payload.num
    }
  },
  actions:{   <----- 增加actions属性
    setNum(content){  <----- 增加setNum方法，默认第一个参数是content，其值是复制的一份store
      return new Promise((resolve)=>{  <----- 返回一个promise，我们模拟一个异步操作，1秒后修改num为5
        setTimeout(()=>{
          context.commit('setNumIs5')
          resolve()
        },1000)
      })
    }
  }
})

• 2.修改App.vue

 async mounted() {
    console.log('旧值---'+this.$store.state.num);
    await this.$store.dispatch('setNum')   <----- actions使用dispatch进行触发，就像mutation使用commit触发一样
    console.log('新值---'+this.$store.state.num);
  },

 

 

 🤓 看了例子，是不是明白了，action就是去commit mutation的，什么异步操作都在action中消化了，最后再去commit mutation的。

😼 当然，你可以模仿mutation进行传参，就像下面这样

actions:{
    setNum(content,payload){   <----- 增加payload载荷
      return new Promise((resolve)=>{
        setTimeout(()=>{
          console.log('测试载荷---'+payload.id);  <----- 测试载荷输出
          content.commit('setNumIs5')
          resolve()
        },1000)
      })
   }
  }

await this.$store.dispatch('setNum',{id:111})    <------ App.vue里调用的时候加上载荷(传参)即可

 

 

 

🤖 官方建议
你如果不想一直使用this.$store.dispatch('setNum',{id:111})这样调用action，你可以采用mapActions的方式，解构到methods进行this直接调用。

methods:{
    ...mapMutations({
      setNumIsWhatAlias:'setNumIsWhat'
    }),
    ...mapActions([   <----- 就像这样，解构到methods中
      'setNum',
　　　　myname:'setNum'//自定义名称

    ])
  }

await this.setNum({id:222})   <----- 这样调用即可

 

🤖 官方建议2
在store/index.js中的actions里面，方法的形参可以直接将commit解构出来，这样可以方便后续操作。

然而我对形参commit解构还是不太懂，先说一下👶🏿解构吧，

一般情况下我们 提交 mutation 的方法 context.commit('方法名')；

 参数解构的写法简化代码(特别是我们需要调用 commit 很多次的时候）：

 再看一下官方api，👉看到没，处理函数总是接受 context 作为第一个参数。

 所以实际上解构就是这样的,原来提交mutation写法，context.commit

{ commit } = context //等价于 commit = context.commit

到此结束👏👏👏

看示例：

actions:{
    setNum({commit},payload){  <----- 直接将content结构掉，解构出commit，下面就可以直接调用了
      return new Promise((resolve)=>{
        setTimeout(()=>{
          console.log('测试载荷---'+payload.id);
          commit('setNumIs5')  <----- 直接调用
          resolve()
        },1000)
      })
    }
  }