Vue.js VueX:Don'；t使用模块嵌套状态？

因此，我喜欢VueX模块和分离数据的想法，因为它使在有大量数据集时更容易推理。。。但我讨厌在商店的状态中将它们称为嵌套对象

这就是模块当前的工作方式：

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
    }
});

将返回为：

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

在仍然使用模块的情况下，是否仍可以按如下方式显示

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

既然没有，你就不能像你想的那样做

---

您需要创建自己的函数或找到合适的库来深度合并对象以使其工作

以下是一个可能的解决方案：

---

如果项目规模扩大，我不确定将你所在的州夷为平地是否一定是一个好主意，因为你必须警惕财产名称冲突

然而，忽略这一点，您可能会自动为所有模块状态创建平面getter。由于这只是提供了替代访问，所有操作和突变都将以正常方式工作

const模块={
contactData，
用户，
搜索，
...
}
常量flatStateGetters=（模块）=>{
常量结果={}
Object.key（modules）.forEach（moduleName=>{
const modulegeters=Object.keys（模块[moduleName].getter | |{}）；
Object.key（模块[moduleName].state）.forEach（propName=>{
如果（！moduleGetters.includes（propName））{
结果[propName]=（状态）=>状态[moduleName][propName]；
}
})
})
返回结果；
}
导出常量存储=新建Vuex.store({
模块，
吸气剂：平板吸气剂（模块），
声明：{
其他数据：null
}
})

你不能。但是帮助程序允许在将（状态或getter）映射到（计算的或方法的）Vue实例时使用名称空间。你看到了吗？嗯。。。这可能值得研究。我想我真的不在乎他们在商店里是什么样子，我只是不想每次我需要访问数据时都打这个电话。$store.state.contactData.contactInfo等等。这对我来说并不是一个大问题，但我目前正在将我的模块与它们所使用的mixin嵌套在一起，并提出一个对所有模块都有意义的名称，因为对于其他开发人员来说，这是一种困难。我并不担心项目会变得太大，这些只是一个较大的非Vue应用程序中的小“脚本”，每个脚本都有特定的功能。

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