[VueJS] 關於vue-router 外面的兩三事 - HINA | vue router lifecycle
最近因為某些需求,所以需要把一些動作放在Vue外面,但是由於Vue整個生命週期的關係,所以有些事情沒辦法在元件當中操作。所以就把歪腦筋動到vue-router身上,後來發現,很多動作還是會有些意外發生。我們就來聊一下那些看似合理的意外!引言以下皆是在Vue2.3/Vue-router2.5含以上版本測試,如果你不是該版本或以上,請斟酌服用。Lifecycle與Vue-router2.5一開始還是要請出官方的圖來打一點預防針,https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram[1]接著來看一下Vue-router2.5在NavigationGuards新加入的特性,https://...
最近因為某些需求,所以需要把一些動作放在 Vue 外面,但是由於 Vue 整個生命週期的關係,所以有些事情沒辦法在元件當中操作。所以就把歪腦筋動到 vue-router 身上,後來發現,很多動作還是會有些意外發生。
我們就來聊一下那些看似合理的 意外!
引言以下皆是在 Vue 2.3/Vue-router 2.5 含以上版本測試,如果你不是該版本或以上,請斟酌服用。
Lifecycle 與 Vue-router 2.5一開始還是要請出官方的圖來打一點預防針,
https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram[1]
接著來看一下 Vue-router 2.5 在 Navigation Guards 新加入的特性,
https://router.vuejs.org/en/advanced/navigation-guards.html[2]
請留意最後的 The Full Navigation Resolution Flow 的順序就好了。
非同步載入我之前有一篇文章[3]提到了 Vuex 的 Plugins 可以做的事情,文末有個但書,
如果是在 App 的最上層,以上的作法會出現例外。
是的,當我把 store 在 App 的最上層呼叫的時候,會出現例外。舉個例子來說,
import store from @/vuex export default { beforeRouteEnter (to, from, next) { store.dispatch(fetch/something) .then(() => { next() }) } }在這種時候,即便你的 Plugins 當中的動作會先執行,你也無法預期非同步載入在什麼時候會拿到結果,緊接著 store.dispatch(fetch/something) 就會開始動作,所以這樣會造成什麼問題?
如果你的 Plugins 當中所觸發的傳輸,會取回關鍵性資料,例如 User ID 如果 1. 取回的...