前言

Vuex 並不會限制我們的代碼結構，只是有三大原則需要遵守：

1. 應用層級的狀態應該集中到單個 store 對像中。
2. 提交 mutation 是更改狀態的唯一方法，並且這個過程是同步的。
3. 非同步行為都應該封裝到 action 裡面。

Vuex 項目結構

如果 store 檔案太大，其實還可以將 action、mutation 和 getter 都分割為獨立的文件。
也可以將模組拆分出來，成為個別獨立的模組。

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # store 主文件，組裝模型的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模組
        └── products.js   # 產品模組

像這樣子，就可以將檔案都分門別類拆分出來，對於大型應用較為容易管理。

結語

不好意思，最近找到一份暫時的專案工作，今天非常忙碌，所以更新內容有點少有點淺。
其實有點猶豫要不要繼續挑戰，但...還不想這麼容易放棄，可是又剛剛才到家真的忙不過來，只好減量更新。
這兩天會審慎思考，並調整時間安排，敬請見諒！