Vue 中各數據項是如何分門別類存儲到 Vuex 或者組件自身的？

01-11

這兩天隨手寫點 Vue 的東西，但是與一個之前寫 Vue 的同事在 Vuex 數據項的關係上出現了分歧。
我的意見大概是：

比如一個管理後台，管理員數據等通用一開始進入頁面就獲取放到 Store 中，然後各個組件都好使用，比如一個 router 裡面可能要修改管理員數據，那麼我就再更新回 Store 中。

然後關於一些類似文章列表的內容，我就存到文章列表組件當中，由列表父組件（父組件同時獲取路由中的頁碼，然後以及從後端 API 獲取列表數據）再依次傳遞給其子組件（比如文章表格，文章分頁）。再如，如果文章列表的每一個數據行有一個點擊查看評論的按鈕，在相同頁面中會下拉出一個評論頁（參考微博），那麼這個時候的數據是存儲在每一個文章行組件中，然後依次傳遞給評論列表子組件。
--------------- 補充分割線 ---------------
再比如說購物車，任何購買頁面（因為是 SPA 所以或者說 Vue 裡面的路由）都能對購物車進行操作，那麼這個時候的購物車數據就需要在 Store 裡面與別的組件進行共享。
我認為像文章列表等不需要與別的組件進行交互和共享（不包括子組件的依賴）的數據應該在組件本身數據裡面。

而同事的想法是：

上述的所有數據都存在 Store 中，按需自取。

然後我們又查看了一下 Vuex 文檔中，其主要想法就是為了分離應用數據和組件數據，讓應用數據有個地方去。

所以現在最大的分歧大概就是，我們應該把什麼數據歸類到應用數據，把什麼數據歸類到組件數據才比較合理。

我個人傾向於認為store是前端的簡化資料庫。

其實放哪兒都是放，你並不會因為把一組數據放到什麼地方就節省內存了。

但是放store裡面有個明顯好處：這段數據是可控，你可以控制它什麼時候創建，什麼時候銷毀。放組件裡面，組件銷毀，數據就沒了。如果你想時間漫遊一下，那就只能再取一遍——除非你做個緩存，那不就是重新發明store么……另外，如果所有數據來自store，那意味著所有的請求都是從同一個地方發出的，維護者不需要關心到底那段讀數據的代碼在什麼地方，它肯定在Vuex（或者redux之類）的某個action里。

如果說有壞處的話，大概是看起來挺怪的，明明是不會重用的數據，卻放在了公共的空間裡面。其實想想大家在資料庫裡面也是這麼乾的，也就釋然了。

vuex 的state 可以用來解決跨父子組件通信問題，並不代表只能這樣用。自己的組件也可以把自己的數據放在state 里維護。

放在state 里的好處就是統一和靈活。
放在data 里也就是為了隔離其他組件。

整體使用還是要看如何寫可以使得項目可維護，可擴展。

瀉藥

默認值

預設值

Default Values

------ 邪惡的分割線 -------

這個跟工程化關係比較大，什麼是 Default Values？

比如一個組件的是可以根據property來改變背景顏色的，那麼在沒有獲取到應有的數據之前，它應該是什麼顏色？

比如一個用於展示圖片的組件，在圖片數據沒有加載完成之前，應該展示些什麼給用戶看？

今天也在為這個事情煩惱，不過最後想明白了。

個人比較傾向於，類似auth(例如token)之類的數據使用Vuex的Store來管理，因為很多component可能會對這些數據有所依賴。而其它不需要被共享的數據，使用component來管理，當離開component之後，就被銷毀。

如果將文章列表，這些不應該在應用的整個生命周期都存在的數據都放入store，我認為這簡直就是一個災難。

我對比了下我寫Android應用和寫Vue。感覺有些相同，也有些不同。相同的地方是Android中也可利用Store來管理視圖的狀態。不同的是並非單個Store，而且Store會隨之View的生命周期的銷毀而銷毀。

如果是一些公共的數據，Android中可以用單例模式，例如創建一個AuthManager從數據層（資料庫或者伺服器或者內存）獲取auth相關信息。

在Vuex2.0裡面關於State的介紹裡面，有這麼一段話，我個人覺得已經說的很清楚了。

Components Can Still Have Local State
Using Vuex doesn"t mean you should put all the state in Vuex. Although putting more state into Vuex makes your state mutations more explicit and debuggable, sometimes it could also make the code more verbose and indirect. If a piece of state strictly belongs to a single component, it could be just fine leaving it as local state. You should weigh the trade-offs and make decisions that fit the development needs of your app.
組件仍然可以具有局部狀態
使用 Vuex 並不意味你應該把所有狀態都放在 Vuex 中去管理。儘管把更多的狀態放到 Vuex 管理，會讓狀態變化變得更加清晰和可調試，但有時也能使代碼變得冗餘和不直觀。如果某部分狀態嚴格屬於一個單獨的組件，那就只把這部分狀態作為局部狀態就好了。你應該權衡利弊，做適應 App 的開發需求的決策。

所以我個人更傾向於視情況而定，而不是一股腦的把所有東西都往Store裡面裝。