Vue EventBus傳值踩坑之Vuex完美解決

作者：易涵123

來源：SegmentFault 思否社區(qū)

問題

多個組件通信問題

EventBus傳值,頻繁會導(dǎo)致接口重復(fù)調(diào)用

我以為eventBus是專門處理兄弟組件之間通信的，但是實際上，eventBus是專門處理同一個路由下的復(fù)雜組件之間通信的。

如果涉及夸路由的組件通信。可以考慮利用$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 頁面

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頁面 實時監(jiān)聽checkStatus

import {mapState} from "vuex"export default {  computed: {    ...mapState({        checkStatus:state => state.common.checkStatus    }),  },  //watch 實時監(jiān)聽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完美解決：

https://github.com/yihan12/day-to-day/blob/master/202009/Vue%20EventBus%E4%BC%A0%E5%80%BC%E8%B8%A9%E5%9D%91%E4%B9%8BVuex%E5%AE%8C%E7%BE%8E%E8%A7%A3%E5%86%B3.md