[Vue.js] Vuex 學習筆記 (10) - 專案結構

專案結構

Vuex 並不限制你的程式碼結構,但仍然有規定了一些需要遵守的規則:

  1. 應用層級的 state 應該要集中到單個 store 物件中。
  2. 提交 mutation 是更改狀態餓唯一方法,並且這個過程好似同步的。
  3. 異步邏輯都應該封裝到 action 裡面。

只要遵守以上規則,如何組織程式碼都是可以的,但是如果把全部程式碼放在 store 的文件中,會顯得有些雜亂,所以我們可以將 action 、 mutation 和 getter 分割到單獨的檔案。

而對於大型應用,我們會希望把 Vuex 相關程式碼分割到模塊中。

以下是一個購物車專案結構範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├── index.html
├── main.js
├── api
│ └── ... # 抽取出 API 請求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 組裝模塊並導出 store 的地方
├── actions.js # 根級別的 action
├── mutations.js # 根級別的 mutation
└── modules
├── cart.js # 購物車模塊
└── products.js # 產品模塊