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!');
    }
  }
});