vue+vuex模块化后实现兄弟组件监听公共值变化。

详细点说，就是vue项目中有两个兄弟组件，它们公用一个值例如oid，该oid存放于vuex中。业务需求为：在组件一中通过事件修改vuex中的该oid，当该oid有变化时即触发组件二中的axios请求（该id作为参数）。我在项目中vuex是分了两个模块a和b。再多说一句哈哈，用了vuex，路由传参都可以被代替了，还算是比较好用的。

先看vuex a模块中的代码，要实现该业务逻辑需要用到getters属性

const moduleA = {
    namespaced: true,
    state: {oid:''},
    mutations: {
    //修改该oid的方法，通过actions提交该方法
      setDkxoid(state,obj){
        state.oid=obj
      }
    },
    actions: {
    //obj作为形参
      setDkxoid(context,obj){context.commit('setDkxoid',obj)}
  },
    getters: {
      getoid:state=>state.oid
    }
  }
  export default moduleA

再看组件一中的代码，主要逻辑是修改该oid

import {mapActions} from 'vuex'
methods: {
    ...mapActions('a',['setDkxoid']),
    //searchoid该方法为组件内方法
    searchoid(){
      this.setDkxoid(1)     //1作为实参修改vuex中的oid值为1
    },
}

组件二中·监听vuex中oid值发生变化，需要计算属性computed和监听属性watch配合使用，执行axios请求。

import {mapGetters} from 'vuex'
computed:{
      ...mapGetters('a',['getoid'])
  }，
  watch: {
      getoid(val){              
        searchDkx({oid:val}).then((response)=>{
          console.log(response)
          业务逻辑。。。
        }).catch(()=>{
        })
      },
      }

最后看一下vuex中主要的代码结构

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './moduleA'
import moduleB from './moduleB'
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
      }
})