Application Structure

Vuex doesn’t really restrict how you structure your code. Rather, it enforces a set of high-level principles:

  1. Application-level state is centralized in the store.

  2. The only way to mutate the state is by committing mutations, which are synchronous transactions.

  3. Asynchronous logic should be encapsulated in, and can be composed with actions.

As long as you follow these rules, it’s up to you how to structure your project. If your store file gets too big, simply start splitting the actions, mutations and getters into separate files.

For any non-trivial app, we will likely need to leverage modules. Here’s an example project structure:

  1. ├── index.html
  2. ├── main.js
  3. ├── api
  4. │   └── ... # abstractions for making API requests
  5. ├── components
  6. │   ├── App.vue
  7. │   └── ...
  8. └── store
  9.     ├── index.js          # where we assemble modules and export the store
  10.     ├── actions.js        # root actions
  11.     ├── mutations.js      # root mutations
  12.     └── modules
  13.         ├── cart.js       # cart module
  14.         └── products.js   # products module

As a reference, check out the Shopping Cart ExampleApplication Structure - 图1 (opens new window).