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

2020-03-10 本文已影响0人木头就是我呀

😆 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啦！后面的一些文集是在这个基础上进行优化，如果你是个优雅的程序员儿，请继续看下去吧！🤔

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

猜你喜欢

热点阅读