vuex與eventbus

 是什么

 vuex是專門為vue.js開發的狀態管理模式

它解決的多個組件依賴同一個狀態的情況，適用於在單頁面中，跨組件狀態管理，登錄狀態管理，購物車管理等等

相對而言結構比較復雜，對於簡單頁面沒必要使用 

 

eventBus又稱事件總線，他使用的事訂閱發布模式，一般於vue的prototype上注冊一個事件中心，用於接收事件已經發送事件，以便全局使用

但是他又有一個比較嚴重的問題，維護困難，因為他沒有明確可維護的列表，完全是定義了什么，才能用什么，一旦不是原開發者維護（甚至原開發者）會一團亂麻

 

 怎么用

 vuex包含了五個屬性

1.state，數據存儲，也就是vuex中狀態管理中的狀態

2.getters，可以理解為vuex中的計算屬性，可以對sate進行簡單的運算后返回，並且實時監聽數據的狀態，在多模塊的vuex結構中也經常用於直接獲取對應模塊的值

3.mutations，數據操作，也就是vuex狀態管理的的管理，所有直接操作state的方法都在這里，所有變更state的方式都必須經過mutations，觸發執行mutations的方法是commit的方法

4.actions，異步操作，mutaions一般用於直接操作state，而actions則是在異步請求獲取數據后執行commit修改state的值，觸發actions的方法是dispath

5.modules，模塊，當數據量大的時候，僅僅使用一張表也一樣不好管理，因此出現了模塊化

   要注意，模塊內部基本與外部結構一致，但不同的地方有，

   1）namespace屬性，這會讓他成為帶命名的空間模塊，模塊內容不的state，getters，mutation，actions都會自動注冊模塊路徑，當他為false時，module的內容與根目錄的內容就等於根目錄上的內容

   2）mutations和actions的函數的參數多了context.rootState，context.rootGetters訪問根目錄數據

   3）dispatch,commit可以傳遞第三個參數為{root:true},在根目錄開始觸發，

dispatch('vip/get', data, {root: true}) 

 

   4）mutations和actions想在具名模塊里注冊全局action

 

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }

 

 

 6，modules是可以在store創建之后追加上去

import Vuex from 'vuex'

const store = new Vuex.Store({ /* 選項 */ })

// 注冊模塊 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注冊嵌套模塊 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

 

 

 

 

 

eventBus的使用方法

import Vue from 'vue'
Vue.prototype.$EventBus = new Vue()

//訂閱
this.$EventBus.$on('xxx',(text)=>{
    console.log(text)
})

//發布
this.$EventBus.$emit('xxx',666)