当数据变化时(添加,修改,删除),使用vuex实现页面刷新
项目情景如图: 1.这是一个普通的查询页面,数据显示在表格中,点击查询,根据选项进行匹配查询。2.点击添加、修改、删除操作,成功后会返回查询页面,并刷新查询结果。使用vuex进行刷新操作:1.新建vuex文件, vuex.jsconst busness = {state: {updateTableList: false},...
·
项目情景如图:
1.这是一个普通的查询页面,数据显示在表格中,点击查询,根据选项进行匹配查询。
2.点击添加、修改、删除操作,成功后会返回查询页面,并刷新查询结果。
使用vuex进行刷新操作:
1.新建vuex文件, vuex.js
const busness = {
state: {
updateTableList: false
},
mutations: {
UPLOAD_TABLE_LIST: (state,update) => {
state.updateTableList = update
}
}
}
export default busness
2.新建getter.js文件
const getter = {
updateTableList: state =>state.updateTableList
}
export default getters
3.查询页面table,添加数据后执行刷新
<template>
<div>
<!-- 省略 -->
<el-button @click="loadData">查询</el-button>
<el-button @click="addData">添加</el-button>
</div>
</template>
<script>
import{ mapGetters } from 'vuex'
export default {
data() {
return{
// ....
}
},
computed: {
...mapGetters([
'updateTableList'
]),
watch: {
// 监听updateTableList,如果updateTableList值有变化,则执行刷新功能
updateTableList: function (newValue) {
if(newValue) {
this.loadData()
this.$store.commit('UPLOAD_TABLE_LIST',false)
}
}
},
methods: {
// 查询表格数据的方法,刷新方法
loadData() {
// ....
},
// 添加数据的方法
addData(){
// ....
// 添加成功后刷新页面
this.$store.commit('UPLOAD_TABLE_LIST',true)
}
}
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)