Structure d'une application

Vuex ne vous restreint pas quand à la structure de code à utiliser. Il impose plutôt de respecter des principes de haut niveau :

1. L'état de l'application est centralisé dans le store.

2. La seule façon de muter l'état est d'acter des mutations, qui sont des transactions synchrones.

3. La logique asynchrone doit être composée et encapsulée dans des actions.

Tant que vous suivez ces règles, c'est à vous de structurer votre projet. Si votre fichier de store devient trop gros, commencez dès lors à séparer les actions, mutations et accesseurs dans des fichiers séparés.

Pour une application non triviale, nous aurons probablement besoin de faire appel à des modules. Voici un exemple de structure de projet :

├── index.html
├── main.js
├── api
│   └── ... # abstraction pour faire des requêtes par API
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # là où l'on assemble nos modules et exportons le store
    ├── actions.js        # actions racine
    ├── mutations.js      # mutations racine
    └── modules
        ├── cart.js       # module de panier
        └── products.js   # module de produit

Vous pouvez jeter à un œil à l'exemple de panier d'achats.