1. 程式人生 > 其它 >vuex中執行刪除邏輯後呼叫分頁查詢的方法

vuex中執行刪除邏輯後呼叫分頁查詢的方法

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 = []    //將儲存刪除資料的陣列清空
        } 
 }