我正在使用 Vue-CLI 開發一個專案，這是我的代碼的一些部分；
//vuex
const member = {
namespaced:true,
state:{
data:[]
},
actions:{
getAll:function(context,apiPath){
axios.post(`http://localhost:8080/api/yoshi/backend/${apiPath}`, {
action: "fetchall",
page: "member",
})
.then(function(response){
context.commit('displayAPI', response.data);
});
},
toggle:(context,args) => {
return axios
.post(`http://localhost:8080/api/yoshi/backend/${args.address}`,
{
action:"toggle",
ToDo:args.act,
MemberID:args.id
})
.then(()=>{
alert('success');
})
},
},
mutations:{
displayAPI(state, data){
state.tableData = data;
},
},
getters:{
getTableData(state){
return state.tableData
}
}
}
//refresh function in member_management.vue
methods: {
refresh:function(){
this.$store.dispatch('member/getAll',this.displayAPI);
this.AllDatas = this.$store.getters['member/getTableData'];
}
}
//toggle function in acc_toggler.vue
ToggleAcc: function (togg) {
let sure = confirm(` ${todo} ${this.MemberName}'s account ?`);
if (sure) {
this.$store
.dispatch("member/toggle", {
address: this.displayAPI,
id: this.MemberID,
act: togg,
Member: this.MemberName,
})
.then(() => {
this.$emit("refresh");
});
}
},
該acc_toggler.vue是一個組件member_management.vue，我想要做的是ToggleAcc（）被觸發時，它會發出重繪 （），并請求更新的資料。
問題是，在整個程序之后，資料被更新了（我檢查了資料庫）但是 refresh() 函式回傳了沒有更新的資料，我可能需要重繪 頁面幾次才能獲得更新資料（在 member_management.vue 中創建時每次都會運行重繪 （））
理論上，ToggleAcc 函式更新資料，refresh() 函式獲取更新資料，我測驗了幾次以確保函式的執行順序正確。
然而，情況永遠不會改變。任何幫助表示贊賞！
uj5u.com熱心網友回復：
該代碼忽略了承諾控制流。所有應該被期待的承諾都應該被鎖起來。在函式內部使用時，應回傳承諾以進行進一步的鏈接。
它是：
refresh:function(){
return this.$store.dispatch('member/getAll',this.displayAPI)
.then(() => {
this.AllDatas = this.$store.getters['member/getTableData'];
});
}
和
getAll:function(context,apiPath){
return axios.post(...)
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/406638.html
標籤：