Nested modules example

[MaickellVilela]

Hi. I really appreciate if you can show me a nested module example. Because of the dynamic module registration, it became a little confusing to me.

[chrisvfritz]

If you created these files:

// src/state/modules/dashboard.js

export const state = {
  view: 'project-manager',
}

// src/state/modules/dashboard/videos.js

export const state = {
  all: [],
}

export const getters = {
  favorited(state) {
    return state.all.filter((video) => video.favorited)
  },
}

Then you'd be able to interact with these modules through:

store.state.dashboard.views
store.state.dashboard.videos.all
store.getters['dashboard/videos/favorited']

As you can see, placing the videos module in a folder called dashboard automatically nests it underneath the dashboard namespace. This works even if the dashboard.js module doesn't exist. And you can have as many levels of nesting as you want. 🙂

Let me know if that makes sense. If it does, I'll convert the explanation into new documentation.

[chrisvfritz]

Also, in creating this example, I realized that there was a line missing from src/state/modules/index.js to properly namespace nested modules with no parent module (e.g. adding dashboard/videos.js without a dashboard.js). That's now been fixed, but you may want to update your local src/state/modules/index.js if you'd like to create nested modules with that pattern in a pre-existing project.

[chrisvfritz]

@MaickellVilela Just pinging on this. 🙂 Please let me know if this explanation made sense to you.

[MaickellVilela]

@chrisvfritz Yes. You helped me a lot. Thank you.