Vuex模塊結構

Question

試圖找到這個教程和例子，但沒有找到任何相關的。我知道這是一種由開發人員來構建它，但我不知道應該怎麼以下的最佳方法：

我有一個店，用相似的模塊：

- root/ 
--- app-store.js 
--- modules/ 
----- tasks.js 
----- another-module.js 

等上。

我得到模塊，命名空間的整個想法。但我不太清楚如何處理這種情況（示例）：

1 - 我訪問任務列表。 2 - 您單擊列表中的任務，它將顯示包含所有詳細信息的視圖。 3 - 你做這個任務（更新，刪除等）的一些變化

我在做什麼現在：

• 一個名爲單個文件 'tasks.js'

• 它加載所有的任務與每個嵌套信息已經嵌套

• 當我點擊時，我設置了一個'currentTaskId'變量。所有操作在更新/刪除/ etc時引用此變量

• 我以ID作爲密鑰加載任務列表，因此我可以通過任務[id]輕鬆引用它，而不是每次都執行搜索。

我的疑惑：

• 這是結構好不好？還是應該創建一個模塊來處理單個對象？

• 是否使用ID作爲數組的一個關鍵真的是一個好習慣？

• 任何其他輸入。我知道Vuex在結構上非常靈活，但是我發現自己想要創造一個很好的結構，但是我害怕過度簡化一些應該更簡單的事情。

Answer 1

結構始終是開發人員的選擇。如果你感到困惑，那麼你可以看看VuexApplication Structure。

應用程序結構

Vuex並沒有真正限制你如何組織你的代碼。相反，它執行一組高級原則：

1. 應用程序級別的狀態集中在商店中。

2. 變異狀態的唯一方法是提交突變，其中 是同步事務。

3. 異步邏輯應該被封裝進來，並且可以用動作組成 。

只要你遵循這些規則，它是由你決定如何構建你的項目。如果您的商店文件變得太大，只需開始將操作，突變和getter分割成單獨的文件。

對於任何非平凡的應用程序，我們可能需要利用模塊。以下是一個示例項目結構：

├── index.html 
├── main.js 
├── api 
│ └── ... # abstractions for making API requests 
├── components 
│ ├── App.vue 
│ └── ... 
└── store 
    ├── index.js   # where we assemble modules and export the store 
    ├── actions.js  # root actions 
    ├── mutations.js  # root mutations 
    └── modules 
     ├── cart.js  # cart module 
     └── products.js # products module 

作爲參考，請查看Shopping Cart Example。