Call an action from within another action
vue.jsVuexvue.js Problem Overview
I have the following setup for my actions:
get1: ({commit}) => { //things this.get2(); //this is my question! }, get2: ({commit}) => { //things },
I want to be able to call one action from within another, so in this example I want to be able to call get2()
from within get1()
. Is this possible, and if so, how can I do it?
vue.js Solutions
Solution 1 - vue.js
You have access to the dispatch
method in the object passed in the first parameter:
get1: ({ commit, dispatch }) => {
dispatch('get2');
},
This is covered in the documentation.
Solution 2 - vue.js
You can access the dispatch method through the first argument (context):
export const actions = {
get({ commit, dispatch }) {
dispatch('action2')
}
}
However, if you use namespaced you need to specify an option:
export const actions = {
get({ commit, dispatch }) {
dispatch('action2', {}, { root: true })
}
}
Solution 3 - vue.js
for actions that does not require payload
actions: {
BEFORE: async (context, payload) => {
},
AFTER: async (context, payload) => {
await context.dispatch('BEFORE');
}
}
for actions that does require payload
actions: {
BEFORE: async (context, payload) => {
},
AFTER: async (context, payload) => {
var payload = {}//prepare payload
await context.dispatch('BEFORE', payload);
}
}
Solution 4 - vue.js
we can pass parameters also while dispatching.
dispatch('fetchContacts', user.uid);
Solution 5 - vue.js
export actions = {
GET_DATA (context) {
// do stuff
context.dispatch('GET_MORE_DATA');
},
GET_MORE_DATA (context) {
// do more stuff
}
}