vuex 的故事

vuex 是基於 flux 架構的理念而誕生，並針對 Vue 優化的專門程式。

那麼，為什麼要使用 flux 架構？

讓我們想像一下網頁的導覽頁面吧：導覽頁面基本上重複性很高，卻又一定會用到。這就意味著，我要在網頁複製貼上很多很多次。你不嫌煩，我都嫌煩呀。

「不是說寫程式就是不要複製貼上嗎？那為什麼我寫 HTML 的時候，就每次都要這麼做啊？」

如果用 iframe 寫呢？<br /> 嗯，iframe 這玩意難調又難看。相信我，誰看了誰調了，都只能說哥哥母湯喔。<br /> 所以怎麼辦？

基於組件（component）的 JavaScript 框架因此誕生了。 一開始由 React 開先河，而 Vue component 借鑿了 React。

能建立各種組件是很好啦，但如果，組件之間要共享某些變數怎麼辦？

例如說「會員帳號」這個文字，如果我同時要在登入頁面、主頁面、還有會員名單，甚至管理後台，怎麼辦？

在組件內都建立一次 AJAX 請求？你會不會太過分？<br /> 在組件內呼叫父組件或子組件？那樣肯定很難維護。<br /> 另外，你還無法預期資料哪裡來，一切問題都會很難抓到。

就不能把所有變數放在同一個地方，讓所有會用上的組件，能統一管理？

這就是 flux 架構想解決的問題：統一變數與狀態的管理和變動，讓各組件能方便取用，並修改變數狀態。而 vuex 就是針對 Vue 量身訂做的 flux 架構。

「為什麼要用到 vuex？」 <br /> 「你叫爺爺去和哥哥拿筆電後給你，又成何體統？」

再講一次，vuex 是基於 flux 架構的理念而誕生，而 flux 架構是為了統一變數與狀態的管理和變動。

接下來，我們必須談到幾個名詞。首先就是單向數據流（unidirectional data flow）：顧名思義，所有變數只能透過一定的方法，單方面地變更。這樣的話，變數更新才有一定的方向可尋。

具體來說如何變動？噢，各程式的實作不同，但通常會這樣走：

  1. 放變數、資料的地方叫做狀態（state）——嗯，我不太喜歡用 state 這個名詞稱之，太過誤導了。不過只能這樣。
  2. 視圖（view）組件接收狀態的東西。視圖可以接收並呈現狀態的變更，但不能更改狀態。
  3. 如果要視圖變更狀態，唯一的辦法就是要求視圖觸發行為（action）。行為是接收「更改狀態」命令的唯一窗口。
  4. 雖然行為要接收來自視圖要求更改狀態的命令，但行為並不是真正負責更改狀態的地方，這是因為要考慮各種狀態變更，或是非同步這種麻煩的資料輸入之類的。因此，我們需要讓行為整理好命令所需的動作後，把整理好的資料，提交給調度（Dispatcher）。<br />只有調度才能更改狀態。

以 Vue 來說，view 當然是我們看到的網頁（如 .vue .html 等等）。這裡面除了 Dispatcher 會被稱作 mutation 以外，其他的都一樣。另外，getters 是 state 的封裝。

現在開始實作吧。我們要判斷用戶有沒有登入，有登入就顯示文章。

首先，就是把 vuex 寫進來。

接著從登入頁面開始作：我在表單裡面寫了 letslogin 來確認資料正常與否，並觸發 vuex 裡面的 ajax_login action。

ajax_login 會作什麼呢？

首先，ajax_login 會觸發 Yes Or No API 以模擬登入的成功或失敗。成功的話 commit 就會發動 mutations 的函式。也就是說，commit("login",login_info.account) 會發動 mutations 的 login 函式。

在 mutations 的 login 函式裡面，就可以更改 state 的狀態了。最後，state 把改動後的變數交給 view，一切就完成了。

故事講完啦。謝謝各位。實作專案在這裡。

More reading