iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
0
Modern Web

VueJS 從前端到後端系列 第 16

Vue App 的溝通方式 Day 15

  • 分享至 

  • xImage
  •  

部落格同步刊登 [IT 鐵人賽] Vue App 的溝通方式 Day 15

鐵人賽至今也過半了,所以為了慶祝一下,我們最後來講講各種 Vue App 之間的溝通方法。扣除掉你可能是使用 Webpack 來封裝你的 App 之外,我們也會提及在不同的封裝之間,我們的 App 要如何來進行溝通。


App 與 App

我們之前有提過 new Vue 之間的一些狀況,

new Vue v.s new Vue Day 7

當我們在同一個封裝過程中,這兩個 App 其實還是分屬於不同的執行個體。所以,兩個不同的 App 之間,我們原本可以使用的一些事件溝通方式,在這邊當然就無法使用。所以,根據 上一篇 所提及的 EventBus 的方法,我們可以在外部先製作一個 EventBus 來進行溝通。

import Vue from 'vue'
import App1 from './App1.vue'
import App2 from './App2.vue'
import EventBus from '@/extends/OldDriver.js'

new Vue({
  created () {
    EventBus.$on('App1Created', () => {
      // App 1 建立囉~
    })
  },
  render: h => h(App1)
}).$mount('#app1')

new Vue({
  created () {
    EventBus.$on('App2Created', () => {
      // App 2 建立囉~
    })
  },
  render: h => h(App2)
}).$mount("#app2')

這麼一來,你在其他的元件內部,只要一樣使用 EventBus 就能跨出 App 來做事件傳遞。這個先決條件就是,你的整套應用程式,必須要在 同一個 Webpack 的封裝下,才能正常運作。

當然,如果你想要使用 Vuex 來做資料傳遞,只要兩個 App 都使用同一套 Store 的話,這麼做也是可行的。

import Vue from 'vue'
import App1 from './App1.vue'
import App2 from './App2.vue'
import Store from './stores'

new Vue({
  Store,
  render: h => h(App1)
}).$mount('#app1')

new Vue({
  Store,
  render: h => h(App2)
}).$mount("#app2')

這麼一來,你的兩個 App 就能共用同一組狀態管理器,當然,跟事件傳遞一樣,你必須自己釐清各種觸發狀態以及資料更新的時機,還有關於生命週期的事情。

Vuex 基本入門 Day 8

所以,上述的方法都還算是能夠解決各種溝通的面向。但是,會不會有失靈的時候?撇除掉你使用 Vuex 來做資料交換,事件傳遞是不是真的使用 EventBus 就是萬解呢?


EventBus 失靈

上一個段落提及了 同一個 Webpack 的封裝下,才能正常運作。那麼,為何會有 EventBus 失靈的狀況?是有的,在你不使用 Webpack,爾或者是你使用不同的 Webpack 程序來封裝的時候。關於使用不同的封裝,我們後續在動態載入的時候會再詳細提及,這裡先知道有這件事情就好。

所謂的不同封裝,你可以想像成有兩個 Vue App,但是他跑在兩個不同的應用程序結構下。所以,你以為的 new Vue() 就不會是同一件事情。所以,即便他們看起來都叫做 EventBus,但是在封裝過後,兩個不同的 App 所封裝出來的 EventBus 就會分處於不同的應用範圍( scope )中,所以,這兩個 EventBus 不會互通有無也是很合理的。

import Vue from 'vue'
import App1 from './app1/App.vue'
import EventBus from '@/app1/extends/OldDriver.js'

new Vue({
  created () {
    EventBus.$on('App1Created', () => {
      // App 1 建立囉~
    })
  },
  render: h => h(App1)
}).$mount('#app1')
import Vue from 'vue'
import App2 from './app2/App.vue'
import EventBus from '@/app2/extends/OldDriver.js'

new Vue({
  created () {
    EventBus.$on('App2Created', () => {
      // App 2 建立囉~
    })
  },
  render: h => h(App2)
}).$mount('#app2')

你覺得上面兩個 App 所使用的 EventBus 會是同一台車嗎?這種狀況,即便你使用 Vuex 也是兩套 不一樣 的狀態管理器,亦即,你的 Store 不是我的 Store,所以就算是這樣,你還是無法共用。

https://ithelp.ithome.com.tw/upload/images/20190917/20001433f2pOn3P8sK.png


在這種情況下,我們該怎麼把事件傳遞處理的 比較好 呢?另外一種處理思維是,我們將這個是件傳遞的工具,往上交給 window 來做,亦即:

window.EventBus = new Vue()

這麼一來,無論我是否使用相同的 Webpack 封裝,我只要使用 window.EventBus 就能夠 上同一台車 呼叫到我所指定過的事件,也能互相傳遞資訊了。

https://ithelp.ithome.com.tw/upload/images/20190917/20001433D7IEOW5tth.png

同樣的情況,你也可以把 Vuex 往上提升到最外層( window )。換句話說,即便你分開封裝兩套 App,只要 Vuex 都能正確引入,那麼你還是可以使用同一套狀態管理器來操作的。

import Vue from 'vue'
import App1 from './app1/App.vue'

new Vue({
  window.Store,
  render: h => h(App1)
}).$mount('#app1')
import Vue from 'vue'
import App2 from './app2/App.vue'

new Vue({
  window.Store,
  render: h => h(App2)
}).$mount('#app2')

只是這樣會增加應用程式的複雜度,而且絕大多數的應用情境裡,可能也不會這樣操作。但是背骨如我,我們後續在動態載入的時候會告訴你這種奇怪的操作方式。


window 好嗎?

不好但是可以接受(結案)。

你必須意識到一件事情,所謂的 window 是指什麼?

  • 對於 JavaScript 來說是真正的 全域
  • 你的事件、狀態控制器都會 暴露 在最外面。
  • 失去了作用域的保護。
  • 只要有心,人人都可以竄改你的事件、狀態控制器內的資料。

https://ithelp.ithome.com.tw/upload/images/20190917/20001433LrjaRTjQGd.png

Chrome DevTool 是一個好東西, 每個人都應該要有。

你必須清楚知道這樣做的風險是什麼,不然是相當不建議這樣操作的。或許我後面在動態載入的時候會提及 window 這件事情,不過,對於事件傳遞,甚至是狀態控制這些事項,倘若你有較為敏感的資訊,例如登入的使用者資料,那麼就非常不建議使用這種方式。

除非,你的系統是公司內部使用,然後內部控管做得非常好。

不然就是 App 做好了不要上線(選我正解)。

當然,為了安全性,你也可以使用一些簡單的查核機制,來確保你的事件傳播以及狀態控制器被 呼叫 的合法性。不過這件事情真的就是只能防君子,不防小人。畢竟你知道的,即便你的 JavaScript 已經壓縮過了,我們還是可以找到你想要做的那些事情( 不要問,很可怕 )。


小結

這個章節真的比較畸形,其實你不太會有機會分開打包你的 App,但你知道的,我就是會做這種事情的人。不然鐵人賽就沒什麼特別的東西可以寫了啊(燦笑)。


上一篇
Component 的溝通方式 :props Day 14
下一篇
題外話:原始碼之藏在 $watch 當中的神奇設定 Day 16
系列文
VueJS 從前端到後端31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言