一 、前言

vue是一个视图层框架，不是一个数据层框架。对于非父子组件之间的通信，仅仅使用简单的父子组件间接实现，不仅繁琐，而且降低性能。因此，需要使用一些方法解决，主要解决方法是使用bus总线或者vuex。

二、bus总线

bus总线其实是挂载在Vue的原型对象中的一个vue实例。利用所有组件都能访问这个实例的特点，结合$emit和$on来实现组件通信。

<div id="app">
    <counter :count="count"></counter>
    <counter :count="count"></counter>
</div>
<script>
Vue.prototype.bus = new Vue();
var counter = {
    props: ['count'],
    data: function(){
        return {
            number: this.count
        };
    },
    methods: {
        addOther: function(){
            this.bus.$emit('add-count', this, this.number);
        }
    },
    template: `<p @click="addOther">{{ number }}</p>`,
    mounted: function(){
        var that = this;
        this.bus.$on('add-count', function(obj){
            console.log(this); // bus
            if(obj !== that){
                that.number++;
            }
        });
    }
};
var app = new Vue({
    el: '#app',
    data: {
        count: 0
    },
    components: {
        counter: counter
    }    
});
</script>

上面代码实现点击一个计数器，另外的计数器加1的效果。

提示：使用this.bus.$emit向外触发事件，使用this.bus.$on监听事件。
注意：this.bus.$on中的this指向bus，不是指向原来组件中的this

三、vuex

vuex的工作流程图：

image.png

vuex实现组件通信的原理就是将整个项目中的数据都放到一个位置存储，这个数据的仓库叫store，数据也就是状态state。这样，各个组件就可以通过发送操作请求Actions给中间处理器Mutatioins，处理器识别请求并对数据state进行增删改查等操作。数据state更新引起组件的更新。

vuex的基本使用方式是：

1. 创建一个store --> 路径./store/index.js

import Vuex from 'vuex';
import Vue from 'vue';
// 使用vuex插件
Vue.use(Vuex);
// 创建store
const store = Vuex.store({
  // 数据/状态
  state: {},
  // 操作请求
  actions: {},
  // 中间处理
  mutations: {},
});
export default store;

2. 将store注入根组件

import store from './store';
var app = new Vue({
  // 将store注入根组件
  store
});

3. 在各个组件中使用访问store

this.$store
this.$store.state // 访问状态
this.$store.getters // 访问getters
this.$store.dispatch // 发送请求到actions
this.$store.commit // 直接发送请求到mutations

补充：

1. 对state、getters、actions、mutations都有映射方法mapXXX可以简化多个值的获取
2. vuex可以将store分割成多个模块，这使用module来实现