Dispatching from Component
In this approach, you dispatch the second action from the component that calls the first action. This is a straightforward method and is commonly used in Vuex.
Syntax:
const store = new Vuex.Store({
actions: {
firstAction(context) {
// Your first action logic
// and Call the second action
},
secondAction() {
// Your second action logic
},
},
});
new Vue({
el: '#app',
store,
methods: {
callFirstAction() {
// Call the first action
},
},
});
Example: The below code example uses the component dispatch approch to call an action from within another action in Vuex.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- VueJS CDN Link --> <script src="https://cdn.jsdelivr.net/npm/vue@2"> </script> <!-- Vuex CDN Link --> <script src="https://cdn.jsdelivr.net/npm/vuex@3"> </script></head><body> <div id="app"> <h2 style="color: green;"> w3wiki </h2> <h2> How to call an action from within another action in Vuex? </h2> <button @click="callFirstAction"> Call First Action </button> </div> <script> const store = new Vuex.Store({ actions: { firstAction(context) { console.log ('Executing first action'); // Your first action logic // Call the second action context.dispatch('secondAction'); }, secondAction() { console.log ('Executing second action'); // Your second action logic }, }, }); new Vue({ el: '#app', store, methods: { callFirstAction() { console.log ('Calling first action from component'); // Call the first action this.$store.dispatch('firstAction'); }, }, }); </script></body></html> |
Output:
How to Call an Action From Within Another Action in Vuex ?
Vuex is a state management library for Vue applications. As we know passing props can be tedious for complex applications with many components, Vuex makes this interaction very seamless and scalable. In Vuex, actions are functions that perform asynchronous operations and commit mutations to modify the state. In this article, we will learn How to call an action from within another action in Vuex.
Table of Content
- Dispatching from Component
- Using root parameter