Question

我要使用API并删除一些信息，我在突变中使用async / await，但是您知道我们在突变中使用异步数据不是标准的，我们必须在操作中使用异步数据，但是如何能做到吗？

这里是我的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>

它可以完美地用于突变，但是对于标准而言，如何才能将其实际用于替代突变呢？

Answer 1

嗯，实际上它与您到目前为止所做的非常相似：


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

我如何在vuex中的动作对象中使用异步和等待？

1 个答案: