4.手把手教你使用Vuex - Actions

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

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

  
  image.png

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

image.png

• 😛 我们直接上一个代码，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(()=>{
            content.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);
    },
  

image.png

• 🤓 看了例子，是不是明白了，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里调用的时候加上载荷(传参)即可
  

  image.png

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

  methods:{
      ...mapMutations({
        setNumIsWhatAlias:'setNumIsWhat'
      }),
      ...mapActions([   <----- 就像这样，解构到methods中
        'setNum'
      ])
    }
  
  await this.setNum({id:222})   <----- 这样调用即可
  

  • 当然你可以设置一个外号，别名，就像下面这样：

  methods:{
      ...mapMutations({
        setNumIsWhatAlias:'setNumIsWhat'
      }),
      ...mapActions({  <----- 取别名
        setNumAlias:'setNum'
      })
    }
  
  await this.setNumAlias({id:222})   <----- 这样调用即可
  

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

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

🤠 OK，看到这里，你应该明白action在vuex的位置了吧，什么时候该用action什么时候不用它，你肯定有了自己的判断，最主要的判断条件就是我要做的操作是不是异步，这也是action存在的本质。当然，你不要将action和mutation混为一谈，action就是mutation的上一级，在action这里处理完异步的一些零碎后，后面的修改state就交给mutation去做了。

🤗 好！大致对vuex的讲解就到这里了，看到这里你肯定对vuex不陌生了，你会安装它，配置它，读取state的值，甚至修饰读(Getter)，然后你会修改里面的值了(Mutation)，假如你有异步操作并且需要修改state，那你就要使用本节的啦(Action)，这样，你就可以在你的项目中用起来vuex啦！后面的一些文集是在这个基础上进行优化，如果你是个优雅的程序员儿，请继续看下去吧！🤔