vuex中執行刪除邏輯後呼叫分頁查詢的方法
阿新 • • 發佈:2022-05-15
1.將分頁的page頁碼儲存在data中
data() {
return {
sendPage:1
};
},
.....
//獲取pag的頁碼
getPage(page) {
this.getTableData(page);
this.sendPage=page //存入頁碼
},
2.點選刪除按鈕,傳遞dispatch時,設定物件,物件中包含page頁碼和id引數
// 刪除 deletePersonal(val){ //傳遞一個物件 this.$store.dispatch('personalAbout/deletePersonal',{sendIdList:val,sendpage:this.sendPage}) },
3.在action中呼叫刪除Api,刪除成功後呼叫action中對頁碼進行更新的方法
this.dispatch('personalAbout/getTableData',value)
// vuex模組中刪除成功呼叫action的方法 actions:{ // 3.刪除 deletePersonal(context, value) { context.state.pslDelList.push(value.sendIdList) //插入資料 console.log(context.state.pslDelList) // 彈窗 this._vm.$confirm('此操作將永久刪除該檔案, 是否繼續?', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning' }).then(() => { api.personalDel( context.state.pslDelList ).then(res => { this._vm.$message({ type: 'success', message: res.data.msg }); context.commit('DELETEPERSONAL', value.sendpage) }) }).catch(() => { this._vm.$message({ type: 'info', message: '已取消刪除' }); }); // 在此處獲取後端資料 } }, mutations:{ .... ELETEPERSONAL(state, value) { // 刪除成功呼叫action的方法 this.dispatch('personalAbout/getTableData',value) state.pslDelList = [] //將儲存刪除資料的陣列清空 } }