How to use async and await with Vuex dispatch?

Sometimes, we want to use async and await with Vuex dispatch.

In this article, we’ll look at how to use async and await with Vuex dispatch.

How to use async and await with Vuex dispatch?

To use async and await with Vuex dispatch, we can add an action method that’s an async function.

For instance, we write

const store = new Vuex.Store({
  //...
  actions: {
    getProducts: async ({ commit }, type) => {
      try {
        const { data: products } = await axios.get(`/api/products/${type}`);
        commit("SET_PRODUCTS", { products, type });
      } catch (err) {
        console.log(err);
      }
    },
  },
  //...
});

to add the getProducts action that makes an async request with axios.get.

And then we call commit to commit the SET_PRODUCTS mutation to store the data.

Conclusion

To use async and await with Vuex dispatch, we can add an action method that’s an async function.