Vuex的学习笔记一

如下的解释，是在知乎看到的，感受粗俗易懂。

组件之间的做用域独立，而组件之间常常又须要传递数据。

A 为父组件，下面有子组件 B 和 C。

A 的数据能够经过 props 传递给 B 和 C。
A 能够经过 $broadcast 调用 B 和 C 的 events，从而操做 B 和 C 的数据。
B 和 C 能够经过 $dispatch 调用 A 的 events，从而操做 A 的数据。

当 B 须要操做 C 的数据就会比较麻烦，须要先 $dispatch 到 A，再 $broadcast 到 C。若是项目比较小的话还好，越大的项目，涉及的组件通讯就越多、越频繁，此时管理起来就会很是累，并且容易出错。

这就是 Vuex 的意义所在。它能够将数据置于单独的一层，并提供给外部操做内部数据的方法。

Vue 2 发布了，去掉了 $dispatch 和 $broadcast，已经不会出现通讯事件 ping-pong 的状况了。咱们须要有一个 Vue 实例来充当通讯媒介的做用，Vue 官方文档里将它叫作 event bus。
export default new Vue();
当咱们须要组件之间事件通讯的时候，只须要对这个 event bus 使用 $emit 和 $on 就能够了。

import Bus from './bus.js';
export default Vue.extend({
  template: `
  <div>{{msg}}</div>
  `,

  data: () => ({
    msg: 'Hello World!'
  }),

  created() {
    Bus.$on('setMsg', content => {
      this.msg = content;
    });
  }
});


import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div @click="sendEvent">Say Hi</div>
  `,

  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});