無法找出Vuex背後的邏輯並將其應用

Question

我剛剛進入Flux結構，並試圖更改我的應用程序以使用它，因爲它看起來合乎邏輯且高效。就我理解邏輯而言，我在實際生活中遇到了麻煩。假設我有一個虛構的電視節目SPA，使用vue，vue-router和vuex。

A系列頁面是一個組件，裏面有一個包含該節目季節（每個季節都是SeasonPoster組件）的區域，如果選擇了一個季節（單擊），它會顯示所有節目。

我有一個模塊series.js爲這個頁面的狀態（包含從API檢索的系列信息）和相應的變化和行動。

我應該在哪裏存儲季節/季節劇集的邏輯？我已經嘗試爲它創建一個模塊seasons.js，但似乎沒有必要，我嘗試將它放入系列模塊中，但它並不適合，例如：

• 當用戶單擊海報，它將調度一個動作setSeason，提交給state.selectedSeason，從API獲取劇集，並提交給state.selectedSeasonEpisodes並在頁面上顯示它們。但是，當我去到另一個系列的頁面時，它仍然存在。
• 手動清理state.selectedSeasonEpisodes和state.selectedSeason看起來像是一種「解決方法」，對於我沒有得到的東西。我應該首先把它放在那裏嗎？
• 我試着在state.series裏面放入「selectedSeasonEpisodes」和「selectedSeason」（每次進入一個新的系列頁面時，系列信息都會被清除），但是我收到很多錯誤，該系列尚未加載，其值爲「null」，屬性未定義。
• 我想過創建一個seasonsEpisodes（複數）而不是selectedSeasonEpisodes，當用戶點擊季節時加起來，有點像「緩存」，所以如果用戶點擊第1季，然後是2，然後是1，它會只做2個API調用。這種想法對於js應用程序是否有效？或者它只會增加狀態並使應用程序變慢？
• 在上面的方法中，它只顯示.find選定的季節劇集，但seasonsEpisodes的初始狀態是未定義的，因此它也會產生錯誤。我應該手動將初始狀態定義爲空數組嗎？
• 我是否應該在整個網站上應用此臨時緩存（僅用於頁面刷新），並將其還原爲state.series，緩存用戶單擊的所有系列？

這不是我第一次遇到邏輯/應用程序的問題和麪臨的「在哪裏把這個」問題，因此，如果任何人有一般的想法或資源，我可以用它來打開我的主意，這與責任每個文件/組件，它將非常感激！

Answer 1

在看不到任何內容的情況下，完全按照自己的方式進行操作有點困難，但這聽起來像是你稍微誤解了vuex的目的;而不是將其視爲整個應用程序的數據存儲區，而是將其視爲存儲當前顯示給用戶的狀態的存儲區，並覆蓋該存儲區而不是在用戶視圖更改時擴展它。

當用戶點擊海報後，將分派一個動作setSeason該承諾state.selectedSeason，瞭解從API情節，並承諾state.selectedSeasonEpisodes並將其顯示在頁面上。但是，當我去到另一個系列的頁面時，它仍然存在。

一個更爲有用的方法將是vuex存儲每個賽季的或通過其ID情節的數據，並將它想要的數據，其ID組件告訴vuex。當您將不同季節的數據覆蓋到相同的「selectedSeason」變量中時，您就打敗了使用vuex的目的。

換句話說，你vuex商店四季看起來像

{ 
    selectedSeason: {/* season data */} 
} 

它應該看起來像

{seasons: [ 
    seasonFoo: {/* season data */}, 
    seasonBar: {/* season data */} 
]} 

清除state.selectedSeasonEpisodes和state.selectedSeason手動似乎是一個「解決辦法「對於我沒有得到的東西。我應該首先把它放在那裏嗎？

右鍵 - 那個邏輯（「我顯示哪個季節？」）應該在組件中;它從（可能的話）路線或另一個組件道具獲取季節ID，然後向該vuex請求該特定ID的數據。 vuex商店不需要關心當前顯示給用戶的內容。

我試圖把「selectedSeasonEpisodes」和「selectedSeason」的state.series（即有一系列的信息並獲得每次清零進入了一個新系列的頁面）裏面，但我得到了很多的錯誤，因爲該系列尚未加載時其值爲「null」，且屬性未定義。

對於異步數據呼叫，那裏將是數據恢復前有延遲，所以您的組件需要能夠應付空數據（無論是顯示正在加載的旋轉或空字段）的vuex狀態更新時，組件應該自動從中選取正確的數據（因爲組件綁定到vuex狀態）。

我想過創建seasonsEpisodes（複數），而不是作爲用戶加起來selectedSeasonEpisodes的點擊季節，有點像一個「緩存」

Vuex是緩存;這就是vuex存在的原因。如果一個組件請求vuex已有的數據，它可以立即返回;如果它請求vuex還沒有的數據，vuex可以從服務器請求它。 （這是您想要將vuex存儲從用戶當前視圖中分離的原因的一部分;如果vuex僅包含當前正在使用的內容並覆蓋每個請求上的舊數據，則可以直接跳過vuex，並讓每個組件直接請求數據）

在上述方法中，它只顯示所選季節劇集的.find，但seasonsEpisodes的初始狀態未定義，因此也會產生錯誤。我應該手動將初始狀態定義爲空數組嗎？

如上所述，最好以這樣一種方式編寫組件，以便它們能夠處理空或空數據，因爲當數據從服務器異步請求時，情況肯定會發生。如何最好地做到這一點取決於你的具體實施;你可能會初始化一個空數組，因此find不會引發錯誤，或者您可以推遲嘗試使用find，直到數據到達。

Answer 2

這完全取決於你如何組織你的存儲，Vue不限制你的選擇。這一點很重要，因爲如果你不需要，你不需要遵循一個特定的方案。創建一個存儲，其中有意義爲您的應用程序。

可能唯一嚴格的是異步任務只能在動作中完成，而經驗法則是狀態數據由getter訪問，並且由突變（避免直接訪問，儘管您沒有義務）更改。

如果您諮詢：

在類似的情況我存儲在存儲內部一切從API獲取的，以防止重複API調用。應用程序不會因爲這樣緩慢，除非您經常執行一些瘋狂的內部邏輯（您可能不會），並且用戶立即獲取先前提取的信息。

此外，通過檢查是否存在v-if並將state數組/對象定義爲空數組/對象，可以避免「空」錯誤。我在這裏沒有看到問題。

當用戶點擊另一個系列鏈接時，您可以檢查這個信息是否已經存在於您的狀態（之前提取），如果是 - 立即顯示，如果不顯示 - 在獲取數據並推送到緩存數組時顯示加載動畫/目的。