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

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

哪个 return 为：

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

有没有办法在仍然使用模块的情况下显示如下？

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

Answer 1

既然有no deep merge possible still in ES6/ES7，就不能随心所欲了。

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

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

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

Answer 2

我不确定如果项目变得更大，那么将所有状态展平一定是个好主意，因为您必须警惕属性名称冲突。

但是，忽略这一点，您或许可以自动为所有模块状态创建平面 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
  }
})

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

VueX: Don't nest state with modules?

vue.js

vuejs2

vuex