Dispatch VUE 的 VUEX 响应

Question

如何捕捉来自另一个组件的 vuex 调度的响应？因此，如果响应是 200，我会做其他事情。 component.vue

this.$store.dispatch("setTrigger");

store.js


    setTrigger({ state }) {
      axios
        .post(
          "https://xxx.us/api/savetriggers",
          {
            organizationsDefaultTriggerTime: state.organizationsDefaultTriggerTime,
            runFailedDefaultTriggerTime: state.runFailedDefaultTriggerTime,
          },
          {
            headers: {
              Authorization: `Bearer ${state.currentAuthToken}`,
            },
          }
        )
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error.data);
        });
    },

setTrigger 在 store.js 中，我从组件内部调用调度。

我也应该使用状态和吸气剂吗？这是最佳做法吗？

Answer 1

您需要从行动中转发承诺。有点像这样：

main.js（商店）

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";

Vue.config.productionTip = false;

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    something: 0
  },
  getters: {
    getSomething: (state) => state.something
  },
  actions: {
    doSomethingAction: async ({ getters }) => {
      return await new Promise((resolve) => {
        // we return the promise to resolve it inside the component
        setTimeout(() => {
          return resolve(getters.getSomething);
        }, 1000);
      });
    }
  },
  mutations: {
    updateSomething(state) {
      state.something = 1;
    }
  }
});

new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

你的组件

<template>
  <div id="app">
    <button @click="doSomethingInsideComponent">Do Something</button>
    {{ getSomething }}
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from "vuex";

export default {
  name: "App",
  computed: {
    ...mapGetters(["getSomething"]), //<--- get a state from store
  },
  methods: {
    ...mapActions(["doSomethingAction"]), // <--- use dispatch froms store
    ...mapMutations(["updateSomething"]), // <-- use mutation from store
    async doSomethingInsideComponent() {
      // <-- component trigger for the promise forward
      await this.doSomethingAction().then(() => {
        // HERE YOU DO SOMETHING AFTER THE DISPTACH IS FULLFILLED...
        this.updateSomething();
      });
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我希望我的评论足够解释。如果没有请告诉我。这是一个工作示例 CodeSandbox

更新

    async setTrigger({ state }) { //<-------- set this function to "async"
     return await axios //<------------ return your axios call here, and await 
        .post(
          "https://xxx.us/api/savetriggers",
          {
            organizationsDefaultTriggerTime: state.organizationsDefaultTriggerTime,
            runFailedDefaultTriggerTime: state.runFailedDefaultTriggerTime,
          },
          {
            headers: {
              Authorization: `Bearer ${state.currentAuthToken}`,
            },
          }
        )
        .then((response) => {
          console.log(response.data);
          return response //<--------- return the response here
        })
        .catch((error) => {
          console.log(error.data);
        });
    },

在您的组件中，您可以使用 then chaining

处理响应

这样做是为了达到这个目的：

this.$store.dispatch("setTrigger").then((response) => {
  // do what you want here because the store dispatch is forwarded to here
  console.log(response)
});

旁注

你真的应该多了解一下 Promises - Javascript

Dispatch VUE 的 VUEX 响应

VUEX Response of Dispatch VUE

response

vue.js

vuex

更新

旁注