vue.js - 调度 VUE 的 VUEX 响应
问题描述
如何从另一个组件捕获 vuex 调度的响应?因此,例如,如果响应是 200,我会做其他事情。组件.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 中,我从组件中调用 dispatch。
我也应该使用状态和吸气剂吗?这是最佳做法吗?
解决方案
您需要从行动中转发承诺。有点像这样:
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
推荐阅读
- java - 春季启动意外字符%代码37
- sql - 如何在 Hive 中一次查询多个表?
- javascript - 通过 php mail -ajax 发送购物车详细信息
- node.js - node js如何对集合进行排序
- c# - 利用 C# 8 索引和范围
- android - 片段导航与片段容器
- android - 前台/后台/关闭的应用程序:如何处理每个状态下的短信文本
- oauth-2.0 - Microsoft Teams 应用程序上的第 3 方身份验证流程
- r - 在 dplyr 中查找多列的平均值......为什么我得到一个重复的值?
- flutter - 如何在flutter Bloc中调用并行请求