Vuex Modules Structure

Question

Tried to find this across tutorials and examples, but didn't find anything related. I know it is kind of up to the developer to structure it, but I was wondering how should be the best approach to the following:

I have a store, with modules like:

- root/
--- app-store.js
--- modules/
----- tasks.js
----- another-module.js

and so on.

I get the whole idea of modules, namespacing. But I'm not quite sure how to handle this situation (example):

1 - I access the list of Tasks. 2 - You click on a task in the list, it displays a view with all the details. 3 - You do some changes on this task (update, delete, etc)

What I'm doing right now:

• one single file called 'tasks.js'

• it loads all tasks with the information of each one nested already

• when I click, I set a 'currentTaskId' variable. All actions references this variable when updating/deleting/etc

• I'm loading the task list with the ID as the key, so I can easily reference it by tasks[id], instead of doing a search everytime.

My doubts:

• Is this structure ok? Or should I create a module just to handle a single object?

• Is using the ID as a Key for the array really a good practice?

• Any other input. I know Vuex is quite flexible about the structure, but I find myself trying to come up with a nice structure, but I'm afraid of being overthinking something that should be simpler.

Answer 1

Structure is always a developer choice. If you are confused then you can look at Vuex Application Structure.

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:

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

As a reference, check out the Shopping Cart Example.