How to write an async function in a vuex module

Question

I am using Nuxt fetch() lifecycle hook to fetch data from Vuex. My Store structure looks like this

 store/
--| index.js
--| dialog.js
--| country/
------| actions.js    // I want to use async call in this file
------| getters.js
------| mutations.js
------| state.js

In my component I am using fetch like this

async fetch({ store }){
   await store.dispatch("country/fetchCountries")
},

My country/actions.js file look like this

export const fetchCountries = ({commit, dispatch}, form) => {

    // let response = await this.$axios.get('/countries'); 

}

Now, I can not use async in front of the function. How can i use async in front of this function?

kissu · Accepted Answer · 2021-05-19 21:34:35Z

1

This one is not working ?

export const fetchCountries = async ({commit, dispatch}, form) => {

answered May 19, 2021 at 21:34

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Salim Hosen Over a year ago

Thanks for your solution. It worked but another problem occured. this.$axios was not working. But I found out another solution. I wrapped all function inside export default{ async fetchCountries(){ } }

Collectives™ on Stack Overflow

How to write an async function in a vuex module

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related