最近因為某些需求,所以需要把一些動作放在 Vue 外面,但是由於 Vue 整個生命週期的關係,所以有些事情沒辦法在元件當中操作。所以就把歪腦筋動到
vue-router 身上,後來發現,很多動作還是會有些意外發生。
我們就來聊一下那些看似合理的 意外!
--------------------------------------------------------------------------------
引言
以下皆是在 Vue 2.3/Vue-router 2.5 含以上版本測試,如果你不是該版本或以上,請斟酌服用。
Lifecycle 與 Vue-router 2.5
一開始還是要請出官方的圖來打一點預防針,
不是那個五十道陰影,是說我也還沒看過。只是說,人在江湖跑,哪有不挨刀,總是要挨個幾刀才能算是大哥嘛(是嗎?
所以身為一個專業的菜蟲農夫,偶爾被鋤頭打到腳指頭也是很合理的(欸不對!
--------------------------------------------------------------------------------
最近很流行作弊的表,剛好 vuex 也有一份,如果你沒看過,現在讓你看看(當然不是我整理的,網路上神人很多。
> https://vuejs-tips.github.io/vuex-cheatsheet/
這表沒什麼大毛病,不過這樣的東西其實還是需要對 vuex 有相對程度的瞭解,看起來才會有些用處,不然對於初學者來說,她就只是一個整理得很漂亮的表單而已。
簡介
既然
身為一個菜蟲,洗菜的時候抓到很多蟲應該超棒的(欸!只是說,有些蟲實在是很惱人,因為那也不算是蟲,只是個隱藏版的功能。至於為何沒有寫在文件裡?這就只能去問作者了!
注意!最新版本的 Vue 2.6.10 與本文部分原始碼可能會有所出入,但邏輯大部分相同。服用前請先詳閱公開說明書( 哪來的公開說明書 )。
--------------------------------------------------------------------------------
$watch 的實際狀況與問題
文件裡面有特別寫到 $watch 的額外選項,
> deep
immediate
這個就不多做解釋,可以去看官方文件
> https://vuejs.org/v2/
身為一個專業農夫,持續耕耘一些地雷也是一件天經地義的事。不過這也不算是地雷,只是因為需求問題,所以需要一些比較奇技淫巧的處理方法。
不過也沒有很奇技淫巧啦其實。
--------------------------------------------------------------------------------
Vuex Plugins
首先,這裡需要對於 Vuex 有一定的認識,比較基本的就不贅述,請去看文件,有簡體中文可以勉強看看,不然你看英文的也可以。
我們要提的是 Plugins 這一塊,
> https://vuex.vuejs.org/en/plugins.html
前情提要
我們用 Vuex 當然是希望我們在整個應用程式內,資料盡量都是統一的,但是,
這年頭好像 2.0 比較夯,隔壁棚的 ng 也出了 2.0(而且聽說要重來,React 表示:
--------------------------------------------------------------------------------
推薦
當然要先敗讀一下 Kuro 的大作,
> V1 與 V2 元件實體之差異
[http://kuro.tw/posts/2016/10/03/VueJS-V1-%E8%88%87-V2-%E5%