Question

所以，我喜欢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
    }
}

Answer 1

如果项目变得更大，我不确定将你所有的州压平是一个好主意，因为你必须警惕财产名称的冲突。

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

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

Answer 2

既然有no deep merge possible still in ES6/ES7，你就无法按照自己的方式去做。

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

以下是使用lodash的可能解决方案：

@Service

VueX：不要用模块嵌套状态吗？

2 个答案: