CODEWITHSUNDEEP
vuejs2vuex
prettyInPink
prettyInPink

Reputation: 3439

Vue: import object in vuex store state

I am adding various settings to a vuex store which I use and update through various components. The settings are subdivided in objects, but the store.js file is becoming quite long, is there any option on how to import these objects from independent files so the overview is more clear and each setting can have its own file?

export const store = new Vuex.Store({
    state: {

        // @import settings1 from 'settings1.js'
        // @import settings2 from 'settings2.js
        // @import settings3 from  'settings3.js
        // ...

        // instead of adding objects like this:
        settings1: {
            name1: value1,
            name2: value2,
            name3: value3,
            // ...
        },
        settings2: {
            name1: value1,
            name2: value2,
            name3: value3,
            // ...
        },
        settings3: {
            name1: value1,
            name2: value2,
            name3: value3,
            // ...
        }
    }
});

Upvotes: 0

Views: 342

Answers (2)

Steven Spungin
Steven Spungin

Reputation: 29169

You would export the objects to insert into your parent object.

import settings1 from './settings1'
import settings2 from './settings2'

// or 

const settings1 = require('./settings1')
const settings2 = require ('./settings2')

export const store = new Vuex.Store({
    state: {settings1,settings2}
});

settings1.js

module.exports = {
   value1: 1,
   value2: 2,
}

// or even better if using `import` instead of `require`

export default {
   value1: 1,
   value2: 2,
}

settings2.js

module.exports = {
   value3: 2,
   value4: 4,
}

// or even better if using `import` instead of `require`

export default {
   value3: 3,
   value4: 4,
}

Upvotes: 1

Imre_G
Imre_G

Reputation: 2535

I think this works the same as in normal js and works like this:

import settings1 from './settings1'
import settings2 from './settings2'
import settings3 from  './settings3'

export const store = new Vuex.Store({
    state: {
        settings1,
        settings2,
        settings3
    }
});

Upvotes: 1

Related Questions