vue腳手架開發 事件匯流排 bus的妙用

2021-10-13 13:40:01 字數 2140 閱讀 1628

在做上乙個專案中,遇到過這樣乙個問題:

後端給的介面的資料中有公共資料,為了避免多次請求,前端避免不了的需要做資料儲存,

而且如果是多次請求相同資料,前端頁面的效能也將大打折扣。

【為了解決這個問題,我**教了我一手,用$bus來儲存資料,把它當成是全域性的資料,然後就可以非常方便地拿到對應的值】

【在我的認知的裡面,事件匯流排$bus只是用來處理兄弟元件之間通訊的問題,竟然還有這等妙用】

在main.js裡面:

window.$bus =

newvue(;

},})

;

這一步就很妙啊

【bus實質上就是乙個vue例項,可以直接放到了window物件裡面

有了這一步操作後,我似乎感覺這個$bus裡面的資料在全域性都可以訪問到了?

那究竟是不是呢?】

在router——index.js裡面

之前我console.log()的部分我把它刪掉了,但是事實證明,在router——index.js裡面是可以訪問到window.$bus的

而且還不用import,非常強大,

有了這乙個基礎,全域性儲存公共資料就變得異常簡單,哪還需要什麼vuex啊

當然有一說一,這種方法,僅限於資料比較少,業務單一的情況,不然的話vuex該用還得用啊

【在用axios請求資料的時候,出現了乙個bug】

【受到上面的$bus的啟發,不難發現】

事件匯流排還可以用來幹一件很重要的事情——儲存後端給前端的資料,即使後端下班回家了,我一樣快樂地敲**…

【注:此方法僅限於json和js格式並且資料量不大】

【步驟1】

在vue-cli——src裡面建立乙個mock資料夾——建立***x.json 或者 ***.js 檔案

容器搞好了,接下來就要動後端大佬給你的資料,嘿嘿,直接在postman裡面請求一次,然後 ctrl + c /v

最後搞到容器裡面即可。

需要注意的是,如果資料本來就是json,容器也是json檔案,就可以直接貼上到容器裡

但如果資料是json,容器是js檔案,那就需要在容器裡面export default一下

必須滿足上面我說的這兩種情況,

不然在需要資料的地方import的時候,就會報檔案格式的錯誤

個人分析:importexport default是息息相關的,能力有限,說不清楚。

原因解釋:大佬解答

好了,資料算是成功拷貝和引入進來了,

接下來就可以直接賦值給$bus了

import static_region from

"../mock/get_region.json"

import static_data from

"../mock/get_count.json"

window.$bus.region = static_region

window.$bus.region_data = static_data

好了,資料又到了$bus這裡了,那麼就可以愉快地敲**而不用擔心後端回家?睡覺了…寫到最後,竟然有點想哭,hhh

本篇文章就是這些了,希望各位看官能有所收穫

能力有限,歡迎糾錯,一起進步。

vue cli 腳手架開發環境搭建

ps node和git的安裝自己到官網檢視 開啟命令列工具輸入 npm install g cnpm registry 如果用git的命令列工具執行報錯,就換用cmd命令列工具去執行 安裝完成之後輸入 cnpm v,如下圖,如果出現相應的版本號,則說明安裝成功。輸入 npm install webp...

Vue中的事件匯流排 bus

在vue中,我們父子之間通訊簡單明瞭 父元件向子元件傳值 props,在父元件中,用 要傳遞過去的名字 要傳遞的值 在子元件中 使用props 接受即可 子元件向父元件傳值 emit.通過自定義方法,在子元件中,我們使用this.emit 方法名 引數 向父元件傳值 在父元件中,我們使用子元件傳遞過...

Vue系列狀態管理篇 Bus事件匯流排篇

原理 建立乙個空的vue例項,來作為互動的中介 新建乙個資料夾bus,在資料夾中新建乙個檔案 bus.js 也可以不要 在檔案 bus.js 建立以下 import vue from vue const bus new vue export default bus 3.在 main.js 匯入 bu...