We can use the mapActions helper to map the component methods to the action methods with object spread operators so that we can mix multiple mapActions helpers in the method property. Let's see how we can do so with the following steps:
- Import the mapActions helper from Vuex and pass the mutations as an array to the mapActions method with object spread operators, as follows:
// vuex-sfc/actions/mapactions/src/app.vue
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions([
'multiply',
'multiplyAsync',
'multiplyBy',
'divide'
]),
...mapActions({
square: 'multiply'
})
}
}
- Add the computed state property and bind the methods to <template>, as follows:
// vuex-sfc/mapactions/src/app.vue
<p>{{ number }}</p>
<p>
<button v-on:click="multiply">x 2</button>
<button v-on:click="square...