Vuex

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

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

  • Hina Chen
    Hina Chen
7 min read
2019

[IT 鐵人賽] 薛丁格的生命週期 Day 12

是的,這個篇幅會用來聊一下生命週期當中,比較奇怪的事情。薛丁格 我就不解釋了,程式執行其實並沒有像是量子力學的那種疊加狀態,只是,當 Vue 的元件趨於複雜,再搭配上 Vue Router 的時候,你的某些生命週期中的勾子,就會有你所不知道的狀態。 最終狀態 有些時候你可能會遇到一個情況,當我們使用 console.log() 去印出某個物件的時候,你會發現他是有東西的。然後你如果印了某個物件的屬性,例如說 HelloKitty.foo 結果是 undefined。 不要問我為什麼,這是 JavaScript 的

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] Router 與生命週期 Day 11

我在先前的篇幅當中,有提到生命週期與路由的關係。我們這一個篇章,就將路由與生命週期之間的事情,做一個全面性的剖析。如果你之前有稍稍稍稍微留意我的部落格,應該會看過我曾經碎念過 Router 與生命週期之間的事情。 重新檢視 lifecycle 與 vue-router 關於 vue-router 外面的兩三事 VueJS 快速入門 Day 1 所以我就不跪求心理陰影面積了。 生命週期與 Hooks(勾子) 我們除了 Vue 原本就有的方法之外,如果另外再加上 Router 所提供的,那麼大家的順序上就很容易搞混,我們先條列一下到底會有哪些方法: beforeCreate

  • Hina Chen
    Hina Chen
10 min read
2019

[IT 鐵人賽] Router 進階應用 Day 10

聊完了基礎的路由功能後,我們接著來看看關於路由的進階應用方式。你放心,前陣子一直提到的動態元件載入,這邊一樣會出現,所以先給各位打個預防針。不過,如果你真的看膩了什麼動態載入的事情,那麼你想要跳過我也是欣然接受。 何況,進來就進來,出去就出去, 哪有人一直動態載入的啦。 路由守衛方法( Guards Methods ) Navigation Guards 在 Router 當中提供了幾種所謂的路由守衛方法: 其實我覺得叫路由防衛比較好(聽起來超中二的) beforeEach 每個路由要被執行之前,都會先經過這裡,他會傳入三個參數: to 你要去的路由位置。 from 你從哪一個路由位置進來,如果沒有,預設是

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] Router 基本入門 Day 9

聊完狀態管理之後,我們來聊一下前端的路由。最近各大家前端工具都有支援前端路由的功能。而 Vue-Router 是官方推出的。功能上都大同小異,你也可以自己做一個(我最喜歡自己做輪子了)。 如果你做好了記得開源出來~ 前端路由 前端做這件事情應該是 Angular 起了一個頭,畢竟身為 Google 的親生兒子,所以很熱門。其實他並不是什麼很新穎的技術,主要是依靠 HTML5 History API 來做操作。在不支援 History API 的瀏覽器當中,大多都是使用 URL hash 的方式來達成。 例如說:

  • Hina Chen
    Hina Chen
11 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

[IT 鐵人賽] new Vue v.s new Vue Day 7

大家一定會覺得這個標題很奇怪,不就都是 new Vue 嗎?是有什麼差別?對啊,其實都是 Vue 沒錯,但是就像是斯斯有兩種,Vue 也是有好多種不同面向。 是說現在斯斯好像不只兩種了。 new Vue 通常,我們在實作一個 App 的時候,最終我們使用了 new Vue 來將整個 App 綁定在某一個 DOM 的元件上。如果,你綁定一次不夠,想要綁定兩次呢?也不是不可以, import

  • Hina Chen
    Hina Chen
8 min read
ITHome

[IT 鐵人賽] Component 魔術方法 Day 6

這是關於元件方法的最後一篇,實際上來說,Vue.options 並不能算是很魔術的方法。如果把他歸類為奇技淫巧可能比較適合(政治正確)。由於元件的註冊過程當中,會將相對應的實體放到這個屬性當中,所以,我們就可以利用這個地方來做一些事情。 身為邊緣人,我最喜歡這種邪門歪道了。 App 實體 a.k.k Vue 替身 我們在使用 Vue 的時候,在最後一定是使用 new Vue 之後再 $mount 到某個 DOM 底下。 import Vue

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] Component 魔術方法 Day 5

上一篇提及了 import 與 require 之後,我們現在把重心移到元件本身的一些屬性上面。本次內容將會圍繞在 :is 這一個元件屬性上面,我們來看看這個魔術方法到底可以做到哪些事情。 還有,可以做到什麼程度(燦笑) :is 屬性 這個屬性相當特別,他的目的是,將使用這個屬性的元件替換掉,替換成你所 指定 的 Vue 元件。換句話說,你只要把你的 Vue 元件引入後,甚至可以不需要在父層元件設定 components,就可以使用。 <template>

  • Hina Chen
    Hina Chen
8 min read
2019

[IT 鐵人賽] Component 魔術方法 Day 4

我們講完元件的應用之後,本次篇章我們會來說明一下,關於 import 與 require 在元件當中的應用。這兩個方法對於現今的 JavaScript 來說,並不是什麼新奇的東西。而搭配 Vue 的元件又能玩出什麼新的把戲?讓我們繼續看下去。 require 方法 這個方法在一般的 JavaScript 當中很常見,主要目的就是為了將檔案讀取進來。而在 Vue 裡面,他不僅僅是可以引入 JavaScript 檔案,連同圖片檔案也可以利用這種方式來載入。只是圖片檔案利用 require 載入後,會變成以 base64

  • Hina Chen
    Hina Chen
10 min read
2019

[IT 鐵人賽] Component 進階應用 Day 3

上一個篇章提到了基本的元件使用,雖然說是比較基礎的部分,但前前後後也寫了超過四千字的廢話。對於 Vue 比較熟悉的人來說,應該不會有什麼障礙才對。我們今天將會繼續提及,關於元件使用上的一些進階應用,也會接續上一篇比較沒有著墨的部分。 關於混合 Mixins 上一篇有約略提到 Mixins 的個特性,有曾經寫過 SCSS/SASS 的人應該對於這個東西不陌生。是的,他有點類似,也是將一些共用的函數提出去的一種作法。 實際上,Mixins 很類似一個元件的結構,只是他是被封裝成一個物件( Object ),然後透過元件的 mixins 屬性來導入。而 Mixins 本身有兩種作法,

  • Hina Chen
    Hina Chen
6 min read
2019

[IT 鐵人賽] Component 基本入門 Day 2

現今算是 Web Component 當道,如果撇除 HTML5 原生的元件,那麼其實各家不管是 Vue, React 還是 Angular,大多都是圍繞的這個議題。 我們這裡開始會針對 Component 做一系列的操作,你可以想像成整個 Vue 生態中,大部分的時間是圍繞在 Component 上面的。所以我們這裡會慢慢的從基本使用上提起,如果對於 Vue 有初階認識的,或許可以跳過這裡(應該吧?) Component a.k.a 元件

  • Hina Chen
    Hina Chen
17 min read
VueJS

[IT 鐵人賽] Vue 從前端到後端 Day 0

上次參加好像是 2014 年,然後我寫到第二篇就超過時間,索性直接放棄(欸)。不過,由於 Famo.us 也莫名的退流行(等等,好像根本沒流行過)。所以就算是一個,只有我一個人自己玩得很高興的東西,說著說著著實感傷了起來。 這次想說,趁著稍微有一點時間,可以寫一下這些日子接觸 VueJS,到現在的一些心路歷程。像是那個說好的 ReactJS 好像就一直被我遺忘了(啊哈哈哈哈哈)。然後 Ng2,欸,現在好像是 Ng8 了吧?就當作我從來沒寫過 Angular

  • Hina Chen
    Hina Chen
5 min read
VueJS

[VueJS] 使用 Vue 來寫瀏覽器擴充功能

瀏覽器擴充功能其實算是老掉牙的東西了,不過拿 Vue 來開發算是挺方便的一件事情。當然,在這裡你可以把 Vue 換成其他的熱門工具,不過我剛好會寫一點 Vue 所以就拿這個來開發一點小玩具,也是挺合理的。 前置作業 首先呢,你可能會需要一個 Vue 的工具方便作業,在 github 上面,已經有人提供了完整的 Vue Template 可以使用,所以,最快的方式就是用 Vue CLI 的方式去安裝, vue init kocal/vue-web-extension

  • Hina Chen
    Hina Chen
7 min read
VueJS

[VUEJS] 關於 Functional Component 的邪門歪道

上一回有提到動態載入的事情,既然提到了動態的元件載入,就不得不提一下 functional component 這個東西。 是說,也沒有太多神奇的地方,只是借用了 React 的東西拿來班門弄斧一下而已。 Functional Component 官方文件 有提到詳細的功能,有興趣的人可以先去看看。基本上他就是一個無狀態、不屬於任何生命週期的一種元件。 用這種元件的好處是什麼? 預先載入其他的元件 預先處理邏輯 官方的範例當中,就是提及使用他依據不同的條件,來載入不同的元件。這一點很有趣,因為我們可以做在 Vue-Route 裡面的事情,就能搬到函式化的元件裡面來做。當然,這麼做也不是沒有缺點,因為對於整個 Router

  • Hina Chen
    Hina Chen
6 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] $watch 藏在原始碼裡的邊緣人

身為一個菜蟲,洗菜的時候抓到很多蟲應該超棒的(欸!只是說,有些蟲實在是很惱人,因為那也不算是蟲,只是個隱藏版的功能。至於為何沒有寫在文件裡?這就只能去問作者了! $watch 的實際狀況與問題 文件裡面有特別寫到 $watch 的額外選項, deep immediate 這個就不多做解釋,可以去看官方文件 https://vuejs.org/v2/api/#vm-watch 我來聊一下關於 $watch 遇到的問題, methods: { ...mapActions(['setTick']) }, computed: { ...mapGetters(['getTick']

  • Hina Chen
    Hina Chen
6 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