vue任意關係元件通訊與跨元件監聽狀態 vue-communication

木瓜太香發表於2020-10-18
Vue元件

大家好！我是木瓜太香！

眾所周知，元件式開發方式給我們帶來了方便，不過也引入了新的問題，元件之間的資料就像被一道無形的牆隔開，如果我們希望臨時讓兩個元件直接通訊，vuex 太巨，而 $emit 又不好維護 provider 不可控 這個時候就該今天的主角 vue-communication 登場了！

vue-communication介紹

  • 他是一個可觀測可除錯的vue元件通訊方案
  • 任意關係元件可直接通訊
  • 支援跨元件監聽資料變化
  • 支援傳送離線資料

安裝

yarn add vue-communication
// 或者 npm install vue-communication -D

引入

import { $sender, $receiver } "vue-communication";
Vue.prototype.$sender = $sender;
Vue.prototype.$receiver = $receiver;

視訊教程

視訊地址

用法

基本概念：

該元件暴露兩個主要 API 一個是傳送者 $sender 一個是接受者 $receiver，所有的通訊都通過這兩個方法來實現，這裡希望大家將 $sender 理解成傳送意圖的傳送者，他傳送的是意圖，意圖就是希望做一件什麼事情。

意圖型別： dataOnce modifyOnce data modify watch

目前只有以上5種意圖分別涵蓋了：傳送資料的一次和多次，修改資料的一次和多次，跨元件監聽資料變化

傳送資料：

假如 A 元件只向 B 元件傳送一次資料：

A 元件中直接使用 this.$sender("dataOnce-A-B",{d: "我是資料"})

B 元件中在任意時刻（哪怕B都還沒掛載都行，放心食用）使用this.$receiver("dataOnce-A-B") 這個函式返回一個 Promise 物件，直接 .then 接收即可

傳送多次就用 this.$sender("data-A-B","我是資料") ，該方法呼叫多次，對應元件就會多次接收該資料

接收會有變化，由於會多次接收所以無法使用 Promise 來實現，請在引數追加回撥this.$receiver("data-A-B",function(data){ // data就是資料 })

注意：

這裡面的 意圖修飾符-元件1-元件2 的格式是強制的，不管你的元件名有多長，你都要完整的給出！下面的修改資料也一樣，對應到 data-A-B 這個案例，其整個字串可以稱為一個“意圖”，data 叫做意圖修飾符。

接收回執：

我相信大家都明白一個道理，如果委託 A 給 B 送東西，在 A 送到之後不應該默不吭聲的就完了，而是應該告訴你一聲，嘿！你讓我送的東西我已經送到了哦！這就是回執。

需要注意的是回執目前只有在一次性操作中才會有，例如 dataOnce modifyOnce

他們通過 $sender返回的 Promise 物件給出，讓傳送者可以知道，我傳送的資料什麼時候被接收了

this.$sender("dataOnce-A-B","木瓜太香")
.then(flag => {
    console.log("接受者已經接受到資料了！")
})

修改資料：

A 元件中使用 this.$sender("modifyOnce-A-B","name","木瓜太香") 表示 A 元件要修改 B 元件中的 name 屬性把他變為 木瓜太香

B元件中使用 this.$receiver("modifyOnce-A-B","name") 即可完成修改，注意第二個引數必須傳，這是一個許可，表示你認可 A 元件修改當前元件的 name 屬性，如果你寫錯了或者沒傳那麼許可不成立，這是一個讓資料變動可預測也強迫開發者需要更清楚自己在做什麼的一個實現。

如果你要改 obj 物件下的 name 那麼可以寫成 this.$sender("modifyOnce-A-B","obj.name","木瓜太香")

如果你要修改多次可以參照 data 意圖的示例，使用 modify 意圖修飾符即可，注意，目前修改是沒有回撥的，如果你想知道資料什麼時候被修改，可以自己在元件內部監聽。

跨元件監聽資料：

假如 A 元件要監聽 B 元件中的 name 資料變動：

A 元件使用 this.$sender("watch-A-B","person.name",function(nv,ov){ // nv 表示新值 ov 表示舊值 })

B 元件只需要給出一次許可即可： this.$receiver("watch-A-B","person.name")

有前端問題需要討論的可以加我的qun:237871108。也可以通過嗶哩嗶哩搜尋木瓜太香找到我。

相關文章