Блог

Я собираюсь использовать API и удалить из него некоторую информацию, я использую async / await в мутациях, но, как вы знаете, это не стандартно, что мы использовали асинхронные данные в mutation, и мы должны использовать их в действиях, но как мы можем это сделать?

вот мои коды vuex:

 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");
    },
}
  

и вот коды vuejs, которые я использовал в компоненте :

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

Он отлично работает при мутации, но для стандартов, как можно использовать это в действии вместо мутации?

Ну, на самом деле это очень похоже на то, что вы делали до сих пор :

 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);
    }
  },
};