how can i use async and await in action object in vuex?

Question

I'm gonna use an API and take it off some information, I use async/ await in mutations but as you know it's not standard that we used async data in mutation, and we have to use it in actions but how we can do it?

here my vuex codes:

import axios from "axios";


const state = {
    token: "hjOa0PgKqC7zm86P10F3BQkTuLsEV4wh",
    posts: [],
    pending: true,
    error: false,
}
const mutations = {
    async getDataFromApi(state) {
        try {
            const res = await axios.get(
                `https://api.nytimes.com/svc/movies/v2/reviews/picks.json?api-key=${state.token}`
            );
            if (res.status == 200) {
                state.posts = res.data;
                state.error = false;
            }
        } catch (e) {
            state.posts = null;
            state.error = e;
        }
        state.pending = false;
    },
};
const actions = {
    showData({
        commit
    }) {
        commit("getDataFromApi");
    },
}

and here vuejs codes that I used in the component :

<script>
import { mapState } from "vuex";
export default {
  name: "Home",
  mounted() {
    this.getDataFromApi();
  },
  computed: {
    ...mapState(["pending", "error", "posts"]),
  },
  methods: {
    getDataFromApi() {
      this.$store.dispatch("showData");
    },
  },
};
</script>

It works perfectly in mutation but for standards, how can use this in action instead of mutation?

Eldar Eldar · Accepted Answer · 2020-11-01T12:48:29

Well, actually it is pretty similar to what you have done so far :


const mutations = {
    getDataFromApi(state,data) {           
      state.posts = data;
      state.error = false; 
      state.pending = false;
    },
   setError(state,error){
    state.error = error;
    state.posts = null;
    state.pending = false;
   }
};

const actions = {
async  showData({
        commit
    }) {

     try {
      const res = await axios.get(
                `https://api.nytimes.com/svc/movies/v2/reviews/picks.json?api-key=${state.token}`
            );
      if (res.status == 200) {
          commit("getDataFromApi",res.data);
       }else {
        commit("setError",new Error("Something went wrong."));
       }
    }
    catch(e){
      commit("setError",e);
   }
  },
}

how can i use async and await in action object in vuex?

1 Answers