怎么實現一個簡單的vuex-創新互聯

var bus = new Vue()

// 觸發組件 A 中的事件
bus.$emit('id-selected', 1)

// 在組件 B 創建的鉤子中監聽事件
bus.$on('id-selected', function (id) {
 // ...
})

var app = new Vue({
 el: '#app',
 bus: bus
})

// 使用 bus
app.$options.bus

// or
this.$root.$options.bus

var bus = new Vue({
 data: {
  count: 0
 }
})

非父子組件的實現

然后是兩個非父子組件和 app 的實現，子組件都使用到了 bus 的 count，這里用 store.state 表示，跟 vuex 一致：

// 待實現
const store = new Store(Vue, {
 state: {
  count: 0
 }
})

// 子組件 a
const childA = {
 template: 'click me',
 methods: {
  handleClick () {
   this.$store.state.count += 1
  }
 }
}

// 子組件 b
const childB = {
 template: '
count: {{ count }}
',
 computed: {
  count () {
   return this.$store.state.count
  }
 }
}

new Vue({
 el: '#app',
 components: {
  'child-a': childA,
  'child-b': childB
 },
 store: store
})

看到代碼里還有一個 Store 待實現。所需要的參數，因為這里懶得用 Vue.use() ，所以直接將 Vue 作為參數傳入以供使用，然后第二個參數跟我們使用 vuex 傳入的參數一致。

Store 的實現

接下來就是 Store 的實現，兩步實現：

1. 創建一個 bus 實例；

2. 讓子組件都能訪問到 this.$store。

第 1 步驟上面已經有了，第 2 步驟主要用到了 Vue.mixin 來全局混入，但僅僅只是找到有 store 的根實例并賦值 Vue 原型上的 store，也能夠讓根實例 app 不用專門寫 mixins 混入。

class Store {
 constructor (Vue, options) {
  var bus = new Vue({
   data: {
    state: options.state
   }
  })

  this.install(Vue, bus)
 }
 
 install (Vue, bus) {
  Vue.mixin({
   beforeCreate () {
    if (this.$options.store) {
     Vue.prototype.$store = bus
    }
   }
  })
 }
}

實現的 Store 就是一個簡單的 "vuex"，它擁有了 vuex 的 state，足夠讓非父子組件之間進行簡單通信。

在 Store 的構造函數里創建一個 bus 實例，并將其注入 Vue 的原型，實現了組件都能訪問到 this.$store 即 bus 實例。 this.$store 就是一個 Vue 實例，所以訪問了 this.$store.state.count 實際上就是訪問到了 data，從而實現了非父子組件之間的響應同步。全部源碼參考這里 。

以上是“怎么實現一個簡單的vuex”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。