vuex中执行删除逻辑后调用分页查询的方法(Method of calling paging query after deleting logic in vuex)-vue
vuex中执行删除逻辑后调用分页查询的方法(Method of calling paging query after deleting logic in 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 = [] //将存储删除数据的数组清空
}
}
————————
1. Store the paged page number in data
data() {
return {
sendPage:1
};
},
.....
//获取pag的页码
getPage(page) {
this.getTableData(page);
this.sendPage=page //存入页码
},
2. Click the delete button. When transferring the dispatch, set the object, which contains the page number and ID parameters
// 删除
deletePersonal(val){
//传递一个对象
this.$store.dispatch('personalAbout/deletePersonal',{sendIdList:val,sendpage:this.sendPage})
},
3. call the delete API in the action. After the deletion is successful, call the method in the action to update the page number
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 = [] //将存储删除数据的数组清空
}
}