Vuex store architecture in large scale website

user_2361517 0
Viewed 1077

Currently building a large scale website with Vue.js, been stuck in the architecture of Vuex store.

The folder structure now looks like this

.
├── build
├── src
│   └── components
│       ├── Header.vue
│       └── TimeStamp.vue
│       └── Photo.vue
│   └── pages
│       ├── index.vue
│       └── about.vue (includes Header.vue, Thumbnail.vue)
├── store
│   └── index.js
│   └── modules
│       ├── Header.js
│       └── TimeStamp.js
│       └── Photo.js

Basically my code pattern is each component has a corresponding module store, but it seems all module state need to be imported as a big SINGLE object, that's the point confuses me now, because it means even in a page doesn't require TimeStamp component, the TimeStamp state still exist in scope, and let's say if I have hundreds of states total, but I only need Header.js store, so all the others are actually useless.

Therefore, my question is:

Is it possible to create dynamic state object for each page. For example, in About page, only import Header.js and Photo.js, in Index page, only import Header.js and TimeStamp.js, and the structure would look similar like below.

├── store
│   └── pages
│       ├── Index.js
│       └── About.js
│       └── News.js
│
│   └── modules
│       ├── Header.js
│       └── TimeStamp.js
│       └── Photo.js
vuex-modules vuex vue.js javascript
2 Answers

Single State Object

it seems all module state need to be imported as a big SINGLE object

Well, it's all managed as a single object. But of course you know about getters which can return pieces as required?

And bringing store modules together is dead easy

export const store = new Vuex.Store({
  modules: {
    config,
    user,
    pages,
    ...
  },
  plugins: [addTagToType_StorePlugin]
})

The thing about having a single object is you can add cross-cutting code such as the addTagToType_StorePlugin above (this is for enhancing the developer tools display).


Dynamic state

Is it possible to create dynamic state object for each page

Absolutely.

There's no rules about how to structure your state. The flux pattern just gives you rules about how you should update and access state.

You should use whatever structure fits your application best.

You can see above, I use a pages state module. To give you an idea about the dynamic aspect, here's the initial structure.

const state = {
  files: {
    validations: [],
    referentials: [],
    clinics: []
  },
}

So, each property under files is for a different page. If the user never visits the 'validations' page, the state never gets loaded.


How to access dynamic state?

Your getter can return a function which takes a parameter, which is used to 'dynamically' select the slice of state (Ref: Vuex Getters). 

const getters = {
  pageFiles: state => {
    return page => {
      return state.files[page]
    }
  },

computed: {
  pageFiles() {
    return this.$store.getters.pageFiles(this.page)
  },


Devtools and dynamic state

The plugin mentioned above is used to enhance the chrome devtools display when mutating dynamic data. Ref vue-devtools

const addTagToType_StorePlugin = store => {
  store.subscribe((mutation, state) => {
    if (mutation.payload.tag) {
      mutation.type = `${mutation.type} / ${mutation.payload.tag}` 
    }
  })
}

The mutation might be SET_FILES, but which page files?
Pass the page type in payload.tag, and this plugin will change (for example),

SET_FILES

to

SET_FILES / validations
user_47162450

The idea of the vuex store is that it has a single object with all the data within. Picking only parts of the store go against the intended design. If you have data that only persists within your page, then you can manage the data for itself, instead of having a global scope.

TL;DR;

NO

Well, actually, theoretically you could load the data in at the time of loading the component and unload it when not needed. You can then implement something to automate that, but that's not the point of the flux pattern.

user_1975460
Related