VueJS: Cấu trúc ứng dụng

Vuex không thực sự hạn chế cách bạn cấu trúc mã của mình. Thay vào đó, nó thực thi một tập hợp các nguyên tắc cấp cao:

1. Trạng thái mức ứng dụng được tập trung trong store.

2. Cách duy nhất để biến đổi state là bằng cách thực hiện các mutation, đó là các giao dịch đồng bộ.

3. Logic không đồng bộ phải được đóng gói và có thể được tạo thành bằng action.

Miễn là bạn làm theo các quy tắc này, nó tùy thuộc vào bạn làm thế nào để cấu trúc dự án của bạn. Nếu tệp lưu trữ của bạn quá lớn, chỉ cần bắt đầu tách các action, mutation và getters thành các tệp riêng biệt.

Đối với bất kỳ ứng dụng cỡ vừa và lớn nào, ta có thể sẽ cần phải tận dụng các mô-đun. Đây là một cấu trúc dự án ví dụ:

├── 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

Để tham khảo, hãy xem Ví dụ về giỏ hàng.