最近项目中使用eventBus进行组件之间的通信,但是发现会出现,第一次会触发接口一次,第二次会触发接口两次,第N次会触发接口N次
查了其他小伙伴的解决方法是加下面语句
beforeDestroy(){
this.$eventBus.$off("fetchList")
}
但是我再次新增保存时this.$eventBus.emit就不刷新页面了,暂时没有好的解决办法
那就只能用vuex去设置一个变量每次需要刷新的时候加一
1.getter.js
const getters = {
listUpdate: state => state.user.listUpdate
}
export default getters
2.user.js
const user = {
state: {
listUpdate: 0
},
mutations: {
SET_LIST_UPDATE: (state, data) => {
state.listUpdate = data
},
}
actions: {
getListUpdate({ commit }, view) {
commit('SET_LIST_UPDATE', view + 1)
},
}
3.父级页面
computed: {
listUpdate () {
return this.$store.state.user.listUpdate
}
},
watch: {
//监听点击按钮的值是否有变化
listUpdate: {
handler(newVal, oldVal) {
if (newVal != oldVal && newVal != 0&&this.customer_id&&this.visitType!=='0') {
this.getList();
}
},
deep: true, // 深度监听
immediate: true,//立即执行
},
},
4.子级页面//点击按钮去触发刷新
this.$store.dispatch('getListUpdate', this.$store.state.user.listUpdate)