Vue：在 vuex 存储状态下导入对象

Question

我正在向 vuex 商店添加各种设置，我通过各种组件使用和更新。 设置被细分为对象，但是store.js文件变得很长，有没有关于如何从独立文件中导入这些对象的选项，以便概览更清晰，每个设置都可以有自己的文件？

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,
            // ...
        }
    }
});

Answer 1

您将导出对象以插入到您的父对象中。

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,
}

Answer 2

我认为这与普通 js 中的工作方式相同，并且工作方式如下：

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

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