Function: Asynchronous operation is written in actions. It cannot modify the data in the state itself. It can only submit the method to mutations and modify the data in the state through mutations.
- Need to submit asynchronously through dispatch
- Receive asynchronously in actions, there is a parameter context inside that is equivalent to store, which can be synchronized by submitting.
- Receive synchronization in mutations and modify the data in state
// Define some initial data in state to give examplesstate: {
// Define a number count: 0,
// Define an object coderyg: {
name: 'coderyg',
age: 25,
height: 1.93
},
// Define a string info: 'swk'
}Example 1: Normal usage (Requirements: Modify info to zbj after 3s)
//
<p>{{ $ }}</p> //Info is swk<button @click="update">3sModify laterinfo</button>
// dispatch commit asynchronouslyupdate() {
this.$('aUpdate');
}
//
// actions receive asynchronousactions: {
// The context here can be used as a store and synchronized by submitting aUpdate(context) {
setTimeout(() => {
// Submit Synchronization ('mUpdate');
}, 3000)
}
},
// mutations receive synchronizationmutations: {
mUpdate(state) {
= 'zbj'
}
}Example 2.1: Directly submit a large object to carry data
//
<p>{{ $ }}</p> //Info is swk<button @click="update('zbj')">3sModify laterinfo</button>
// dispatch commit asynchronouslyupdate(info) {
this.$(Start here{
type: 'aUpdate',
info
}The end here ispayload);
}
//
// actions receive asynchronously, and the passed payload is used as the second parameter to receiveactions: {
aUpdate(context, payload) {
setTimeout(() => {
// Submit Synchronization ('mUpdate', payload);
(payload);
}, 3000)
}
}
// mutations receive synchronizationmutations: {
mUpdate(state, payload) {
= ;
}
}Example 2.2 Ordinary submission carries multiple parameters after
//
update() {
// Submit asynchronously this.$('aUpdate', Start from here{
message: 'hello vuejs',
success: () => {
('Submission is successful');
}
}At the end of this ispayload)
}
//
actions: {
// Receive asynchronously aUpdate(context, payload) {
setTimeout(() => {
// Submit Synchronization ('mUpdate', payload);
}, 3000)
}
},
mutations: {
// Receive synchronization mUpdate(state, payload) {
// Modify data = ;
// Call method ();
}
}Example 2.3 Elegant submission via Promise
When submitting asynchronous with dispatch, receiving asynchronous requests is used to receive Promise. When the resolve() method is called inside the Promise, you can follow the dispatch method followed by the then() method
//
update() {
// Submit asynchronously this.$store
.dispatch('aUpdate', Start from here{
message: 'hello vuejs',
success: () => {
('success');
}
}At the end of this ispayload)
// Call here.then .then(res => (res))
}
//
actions: {
// Receive asynchronously aUpdate(context, payload) {
// Direct return Promise return new Promise((resolve, reject) => {
setTimeout(() => {
// Submit Synchronization ('mUpdate', payload);
// Call method test ();
// Call resolve resolve('res');
}, 3000)
});
}
},
mutations: {
// Receive synchronization mUpdate(state, payload) {
= ;
}
}This is the end of this article about Vuex actions: Detailed explanation of asynchronous operations. For more related Vuex actions: Detailed explanation of asynchronous operations, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!