CODEWITHSUNDEEP
javascriptarchitecturevue.jsvuex
user900362
user900362

Reputation:

Granular organisation with Vuex

I'm working on a fairly large project, and I want to break Vuex modules into as many parts as possible. For example, I want to separate the API functionality from UI, keeping the data that comes from the server isolated from the component flags and so.

In the documentation (http://vuex.vuejs.org/en/structure.html), the authors suggest to break everything into modules, which is great. The issue comes when I have, let's say, products as a page and products as data, and I want to keep them separated.

Is it possible to achieve something like this:

{
  modules: {
    api: {
      products: // ...
    },
    pages: {
      products: // ...
    }
  }
}

and be able to access them like store.api.products and store.pages.products? Am I getting it wrong?

Thanks!

Upvotes: 2

Views: 327

Answers (1)

user900362
user900362

Reputation:

I've been taking a look at the vuex code and I've found this:

// retrieve nested modules
const nestedMutations = this._createModuleMutations(module.modules, newNestedKeys)

It turns out that you can actually make your vuex modules granular by doing:

{
  modules: {
    api: {
      modules: {
        products: /* ... */
      }
    },
    components: {
      modules: {
        page: /* ... */
      }
    }
  }
}

And it will result in a state structure like:

Vuex State screenshot

Upvotes: 3

Related Questions