Vue EventBus传值踩坑之Vuex完美解决

时间 2020-09-29 标签 vue eventbus vuex 完美解决

问题

多个组件通讯问题
EventBus传值,频繁会致使接口重复调用javascript

我觉得eventBus是专门处理兄弟组件之间通讯的，可是实际上，eventBus是专门处理同一个路由下的复杂组件之间通讯的。
若是涉及夸路由的组件通讯。能够考虑利用$route对象传参或者Vuexvue

vuex完美解决

因为涉及v-model,须要特殊处理:java

buggit

computed property "XXX" was assigned to but it has no setter

处理

componentgithub

computed: {
  ...mapGetters({
      nameFromStore: 'name'
  }),
  name: {
     get(){
       return this.nameFromStore
     },
     set(newName){
       return newName
     } 
  }
}

storevuex

export const store = new Vuex.Store({
   state:{
     name : "Stackoverflow"
   },
   getters: {
     name: (state) => {
       return state.name;
     }
   }
}

个人处理

component 页面this

<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.jscode

const state = {
  checkStatus:false
}
const getters = {}
const actions = {}
const mutations = {
  setCheckStatus(state,payload){
    state.checkStatus = payload
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

其余 component页面实时监听checkStatuscomponent

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