问题
多个组件通信问题
EventBus 传值, 频繁会导致接口反复调用
我认为 eventBus 是专门解决兄弟组件之间通信的,然而实际上,eventBus 是专门解决同一个路由下的简单组件之间通信的。
如果波及夸路由的组件通信。能够思考利用 $route 对象传参或者 Vuex
vuex 完满解决
因为波及 v -model, 须要非凡解决:
bug
computed property “XXX” was assigned to but it has no setter
解决
component
computed: {
...mapGetters({nameFromStore: 'name'}),
name: {get(){return this.nameFromStore},
set(newName){return newName}
}
}
store
export const store = new Vuex.Store({
state:{name : "Stackoverflow"},
getters: {name: (state) => {return state.name;}
}
}
我的解决
component 页面
<template>
<div v-model="common.checkStatus">
123
</div>
</template>
<script>
import {mapState} from "vuex"
export default {
//component 页面 computed 局部
//computed
computed: {
...mapState({
common:state => state.common,
checkStatus:state => state.common.checkStatus
}),
}
//component 页面 watch 局部
//watch 实时监听 checkStatus
watch: {checkStatus(newVal){if(newVal){}else{}
}
}
}
</script>
store 下的 common.js
const state = {checkStatus:false}
const getters = {}
const actions = {}
const mutations = {setCheckStatus(state,payload){state.checkStatus = payload}
}
export default {
state,
getters,
actions,
mutations
}
其余 component 页面 实时监听 checkStatus
import {mapState} from "vuex"
export default {
computed: {
...mapState({checkStatus:state => state.common.checkStatus}),
},
//watch 实时监听 checkStatus
watch: {checkStatus(newVal){if(newVal){}else{}
}
}
}
其余 component 页面 更新 checkStatus
import {mapState} from "vuex"
export default {
methods:{clickOpen(){this.$store.commit("setCheckStatus",true)
},
clickClose(){this.$store.commit("setCheckStatus",false)
}
}
}
Vue EventBus 传值踩坑之 Vuex 完满解决