[Vuex Series] - Understanding Actions My Opinions

How Actions defined

Shu small end Fucai, a summary of Action are as follows:

• Action may submit mutation methods to change state by mutation
• Action function may receive a context object to change state and by context.state context.getters. (Not used in the actual work)
• Action can execute arbitrary synchronous and asynchronous operation

Next, we use Actions by three points summarize the above point of view:

Action may submit mutation methods to change state by mutation

We first define a addCountAction method used to do accumulator actions.js

const actions = {
  addNumAction (context, num) {
    context.commit('addNum', num)
  },
  addCountAction (context) {
    context.commit('add')
  }
}
export default actions

Actions by .dispatch distributed in the assembly, as follows:

<template>
  <div class="action">
    <p>{{ count }}</p>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    add () {
      this.$store.dispatch('addCountAction')
    }
  }
}
</script>

Action function may receive a context object to change state and by context.state context.getters. (Not recommended)

Method reduceCountAction define a new method actions.js, the realization of a tired Save

const actions = {
  addNumAction (context, num) {
    context.commit('addNum', num)
  },
  addCountAction (context) {
    context.commit('add')
  },
  reduceCountAction (context) {
    context.state.count--
  }
}
export default actions

Actions by .dispatch distributed in the assembly, as follows:

<template>
  <div class="action">
    <button @click="reduce">-REDUCE</button>
    <p>{{ count }}</p>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    add () {
      this.$store.dispatch('addCountAction')
    },
    reduce () {
      this.$store.dispatch('reduceCountAction')
    }
  }
}
</script>

Action can execute arbitrary synchronous and asynchronous operation

We will actions.js in addCountAction function modified as follows:

addCountAction (context) {
    setTimeout(function () {
      context.commit('add')
    }, 2000)
}

After the changes we found in the implementation of cumulative, it waits two seconds before execution.

Use mapActions auxiliary function in the assembly

The previous assembly with helper function addCountAction Alternatively, modified as follows:

<template>
  <div class="action">
    <button @click="reduce">-REDUCE</button>
    <p>{{ count }}</p>
    <button @click="addCountAction">+ADD</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['addCountAction']),
    reduce () {
      this.$store.dispatch('reduceCountAction')
    }
  }
}
</script>

Actions combination of

Action usually asynchronous, so how do you know what action the end of it? More importantly, how can we combine multiple action, to deal with more complex asynchronous process?

First, you need to understand store.dispatch can handle Promise action handler is triggered returned, and still return store.dispatch Promise:

const actions = {
  addNumAction (context, num) {
    context.commit('addNum', num)
  },
  addCountAction (context) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        context.commit('add')
        resolve()
      }, 1000)
    })
  },
  reduceCountAction (context) {
    context.state.count--
  },
  addTwoAction (context) {
    context.dispatch('addCountAction').then(() => {
      context.commit('addTwo')
    })
  }
}
export default actions

Actions we implemented a combination of the above functions in addTwoAction

• If we use async / await, we can combined as follows action

// assumed getData () and getOtherData () returns Promise 

Actions: { 
  the async actionA (the commit {}) { 
    the commit ( 'gotData', the await getData ()) 
  }, 
  the async actionB ({dispatch, the commit}) { 
    the await dispatch ( 'actionA') // wait actionA complete 
    the commit ( 'gotOtherData', the await getOtherData ()) 
  } 
}

Store.dispatch action may trigger a plurality of functions in different modules. In this case, only when all the trigger function to complete and return the Promise will be performed.

Finally, we say that under the official definition, Actions in the official website is defined as:

•  
  Action similar mutation, except that:
• Action is submitted mutation, rather than directly change state.
• Action can contain any asynchronous operation.