首頁 > web前端 > js教程 > 主體

詳解如何實現vuex(詳細教學)

亚连
發布: 2018-06-06 14:18:55
原創
1906 人瀏覽過

本篇文章主要介紹如何實現一個簡單的 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: &#39;<button @click="handleClick">click me</button>&#39;,
 methods: {
  handleClick () {
   this.$store.state.count += 1
  }
 }
}

// 子组件 b
const childB = {
 template: &#39;<p>count: {{ count }}</p>&#39;,
 computed: {
  count () {
   return this.$store.state.count
  }
 }
}

new Vue({
 el: &#39;#app&#39;,
 components: {
  &#39;child-a&#39;: childA,
  &#39;child-b&#39;: 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,從而實現了非父子元件之間的回應同步。全部源碼參考這裡 。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

使用node應用程式中timing-attack存在哪些安全漏洞

在vue元件傳遞物件中實作單向綁定,該怎麼做?

在Vue元件中如何使用 TypeScript的方法(詳細教學)

以上是詳解如何實現vuex(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板