Vuex

[IT 鐵人賽] Component 的溝通方式 Vuex Day 13

我們會把 Vuex 放的比較前面,是因為既然使用了狀態管理機制,那麼,用他來跟各種元件溝通,是比較方便的一件事情。然後,我拖了那麼久才講到元件溝通好像有點奇怪,也是啦,其實我本來就不是很喜歡溝通(欸不對)。 是說,溝通只是 Vuex 附加的好處而已其實。 元件交換資料 我們之前有提過元件之間的資料交換,也提過 Vuex 的基本應用: Component 基本入門 Day 2 Vuex 基本入門 Day 8 之前說過 Vuex 是幫我們做狀態管理的,所以說我們拿來做元件交換資料也是很適切的事情。

  • Hina Chen
    Hina Chen
7 min read
VueJS

[IT 鐵人賽] Vuex 基本入門 Day 8

在我們要聊元件溝通之前,我們先來聊一下關於 Vuex 這個套件。他是官方推出的狀態管理的工具,官方中文翻譯叫做倉庫(?),也是啦,如果把 store 直接翻譯的話,好像叫倉庫也是挺合理的。 但我覺得好像狀態管理會比較符合事實。 Vuex 如果你是使用 Vue CLI 的話,那就是用 yarn 或 npm 裝一下就好, yarn add vuex # OR npm i vuex 然後在你的 App 裡面,你會有幾件事情要做:

  • Hina Chen
    Hina Chen
8 min read
VueJS

[VueJS] 關於 vue-router 外面的兩三事

最近因為某些需求,所以需要把一些動作放在 Vue 外面,但是由於 Vue 整個生命週期的關係,所以有些事情沒辦法在元件當中操作。所以就把歪腦筋動到 vue-router 身上,後來發現,很多動作還是會有些意外發生。 我們就來聊一下那些看似合理的 意外! 引言 以下皆是在 Vue 2.3/Vue-router 2.5 含以上版本測試,如果你不是該版本或以上,請斟酌服用。 Lifecycle 與 Vue-router 2.5 一開始還是要請出官方的圖來打一點預防針, https:

  • Hina Chen
    Hina Chen
5 min read
VueJS

[VueJS] vuex 的五十道陰影

不是那個五十道陰影,是說我也還沒看過。只是說,人在江湖跑,哪有不挨刀,總是要挨個幾刀才能算是大哥嘛(是嗎? 所以身為一個專業的菜蟲農夫,偶爾被鋤頭打到腳指頭也是很合理的(欸不對! 最近很流行作弊的表,剛好 vuex 也有一份,如果你沒看過,現在讓你看看(當然不是我整理的,網路上神人很多。 https://vuejs-tips.github.io/vuex-cheatsheet/ 這表沒什麼大毛病,不過這樣的東西其實還是需要對 vuex 有相對程度的瞭解,看起來才會有些用處,不然對於初學者來說,她就只是一個整理得很漂亮的表單而已。 簡介 既然 vuex

  • Hina Chen
    Hina Chen
5 min read
VueJS

[VueJS] Vuex 2.0 關於 plugins 的事情

身為一個專業農夫,持續耕耘一些地雷也是一件天經地義的事。不過這也不算是地雷,只是因為需求問題,所以需要一些比較奇技淫巧的處理方法。 不過也沒有很奇技淫巧啦其實。 Vuex Plugins 首先,這裡需要對於 Vuex 有一定的認識,比較基本的就不贅述,請去看文件,有簡體中文可以勉強看看,不然你看英文的也可以。 我們要提的是 Plugins 這一塊, https://vuex.vuejs.org/en/plugins.html 前情提要 我們用 Vuex 當然是希望我們在整個應用程式內,資料盡量都是統一的,但是,如果遇上了非同步傳輸的資料,

  • Hina Chen
    Hina Chen
7 min read