How to dispatch async data with vue.js 3 store?
How to dispatch async data with vue.js 3 store?
1 answer
by
filiberto ,
8 months ago
@ryleigh
To dispatch async data with Vue.js 3 store, you can follow these steps:
- Define an action in your store module that will handle the asynchronous logic. This action should return a promise so that you can handle the asynchronous data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// store/module.js
export default {
actions: {
fetchDataFromApi({ commit }) {
return new Promise((resolve, reject) => {
// Make an asynchronous call to fetch data
setTimeout(() => {
const data = { name: 'John Doe', age: 30 };
commit('setData', data);
resolve();
}, 1000);
});
}
}
};
|
- Dispatch the action in your component. You can use store.dispatch to dispatch the action and handle the async data once the promise is resolved.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// MyComponent.vue
export default {
mounted() {
this.$store.dispatch('fetchDataFromApi')
.then(() => {
// Handle the async data once it is fetched
console.log(this.$store.state.data);
})
.catch((error) => {
// Handle any errors that occur during the async operation
console.error(error);
});
}
};
|
- Ensure that the async data is stored in the store state by committing a mutation in the action.
1 2 3 4 5 6 7 8 9 10 11 12 |
// store/module.js
export default {
state: {
data: {}
},
mutations: {
setData(state, data) {
state.data = data;
}
}
};
|
By following these steps, you can dispatch async data in Vue.js 3 store and handle the data in your component once it is fetched asynchronously.