本篇文章主要介紹如何實現一個簡單的 vuex，現在分享給大家，也給大家做個參考。
首先我們需要知道為何要使用 vuex。父子元件通訊用 prop 和自訂事件可以搞定，簡單的非父子元件通訊用 bus（一個空的 Vue 實例）。那麼使用 vuex 就是為了解決複雜的非父子元件通訊。
只會使用 vuex 沒什麼，看過文檔敲擊程式碼大家都會。難道你不想知道 vuex 是如何實現的？ ！
拋開 vuex 的源碼，我們先來想想如何實作一個簡單的 "vuex"。有多簡單呢，我不要 getter、mutation、action 等，我只要 state 就行了。
非父子元件通訊
在實現之前，我們得來溫故一下bus 的實現，借用官網的例子：
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})登入後複製
遙想當年，實例化後的bus 不知放哪好，最後無奈將其放到了window 下，一直window.bus 的使用。雖然這樣也沒問題，但還是影響到了全域作用域。
突然的某一天，我發現可以掛載在vue 的根實例下（從此告別window.bus），於是便有了：
var app = new Vue({
el: '#app',
bus: bus
})
// 使用 bus
app.$options.bus
// or
this.$root.$options.bus登入後複製
然後又發現了，bus 其實不只是on 事件才可以通訊。其實 bus 是 Vue 實例，其中 data 是回應的。例如在 app 這個根實例下有兩個非父子元件，都使用到了 bus 的 data，那麼它們是回應同步的。
var bus = new Vue({
data: {
count: 0
}
})登入後複製
以上，子元件 a 修改了 count，如果子元件 b 有用到 count，那麼它就能回應到最新 count 的值。
說了這麼多，你還沒發現嗎？這不就是實現了非組件之間通信，vuex 的 state 嗎？ ！
封裝 bus
是的，把剛剛的 bus 封裝一下，這就是一個最簡單的 "vuex" （只剩下 state 的功能）。首先，我們將有一個根實例 app ，實例下有兩個非父子元件 childA 和 childB 。
html 程式碼的實作如下：
<p id="app">
<child-a></child-a>
<child-b></child-b>
</p>
登入後複製
非父子元件的實作
然後是兩個非父子元件和app 的實現，子元件都使用到了bus 的count，這裡用store.state 表示，跟vuex 一致：
// 待实现
const store = new Store(Vue, {
state: {
count: 0
}
})
// 子组件 a
const childA = {
template: '<button @click="handleClick">click me</button>',
methods: {
handleClick () {
this.$store.state.count += 1
}
}
}
// 子组件 b
const childB = {
template: '<p>count: {{ count }}</p>',
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 的實現，兩步驟實作：
建立一個bus 實例；
讓子元件都能存取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，從而實現了非父子元件之間的回應同步。全部源碼參考這裡 。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
使用node應用程式中timing-attack存在哪些安全漏洞
在vue元件傳遞物件中實作單向綁定，該怎麼做？
在Vue元件中如何使用 TypeScript的方法（詳細教學）
以上是詳解如何實現vuex（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
