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

問題

多個組件通信問題

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完美解決