CODEWITHSUNDEEP
vue.jsvuejs2vuex
Derek
Derek

Reputation: 289

VueX: Don't nest state with modules?

So, I love the idea of VueX modules and separating my data out, as it makes it far easier to reason when there are large sets of data... but I hate having to refer to them as nested objects in the store's state.

This is how the module currently works:

contactData.js:

export const contactData = {
    state: {
        contactInfo: null,
        hasExpiredContacts: false
    },
    mutations: {
        updateContactInfo(state, data) {
            state.contactInfo = data;
        },
        updateExpired(state, data) {
            state.hasExpiredContacts = data;
        }
    }
}

store.js:

import Vue from 'vue';
import Vuex from 'vuex';

import { contactData } from './contactData.js';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: { contactData },
    state: {
        otherData: null
    }
});

Which would return as:

store: {
    state: {
        contactData: {
            contactInfo: null,
            hasExpiredContacts: false
        },
        otherData: null
    }
}

Is there anyway to, instead, display it as the following, while still using a module?

store: {
    state: {
        contactInfo: null,
        hasExpiredContacts: false,
        otherData: null
    }
}

Upvotes: 1

Views: 818

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85583

Since there's no deep merge possible still in ES6/ES7, you can't do it like the way you want.

You need to make your own function or find a suitable library to deep merge the objects to make it work.

Here's a possible solution using lodash:

modules: { _.merge(contactData, { state: { otherData: null } } ) }

Upvotes: 0

Richard Matsen
Richard Matsen

Reputation: 23523

I'm not sure that flattening out all your state would necessarily be a great idea if the project grew larger, as you'd have to be wary of property name clashes.

However, ignoring that, you could perhaps create flat getters for all module state automatically. Since this just provides alternative access all actions and mutations will work in the normal way. 

const modules = {
  contactData,
  user,
  search,
  ...
}

const flatStateGetters = (modules) => {
  const result = {}
  Object.keys(modules).forEach(moduleName => {
    const moduleGetters = Object.keys(modules[moduleName].getters || {}); 
    Object.keys(modules[moduleName].state).forEach(propName => {
      if (!moduleGetters.includes(propName)) {
        result[propName] = (state) => state[moduleName][propName]; 
      }
    })
  })
  return result;
}

export const store = new Vuex.Store({
  modules,
  getters: flatStateGetters(modules),
  state: {
    otherData: null
  }
})

Upvotes: 1

Related Questions