VueX: 모듈로 상태를 중첩하지 않습니까?

VueX: 모듈로 상태를 중첩하지 않습니까?

저는 VueX 모듈을 사용하여 데이터를 분리하는 것을 좋아합니다. 데이터 집합이 많을 때 추론을 훨씬 쉽게 할 수 있기 때문입니다.하지만 상점 상태에서 중첩된 개체라고 해야 하는 것은 싫습니다.

모듈의 현재 작동 방식은 다음과 같습니다.

연락처 Data.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
    }
}

프로젝트가 더 커지면 부동산 이름 충돌을 경계해야 하기 때문에 모든 주를 평평하게 만드는 것이 반드시 좋은 아이디어가 될 수 있을지 모르겠습니다.

그러나 이를 무시하면 모든 모듈 상태에 대한 플랫 게터를 자동으로 만들 수 있습니다.이것은 단지 대안적인 접근을 제공하기 때문에 모든 행동과 돌연변이는 정상적인 방식으로 작동합니다.

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

ES6/ES7에서는 아직 딥 병합이 가능하지 않기 때문에 원하는 방식으로 통합할 수 없습니다.

---

기능을 직접 만들거나 개체를 심층 병합하여 작동할 수 있는 적절한 라이브러리를 찾아야 합니다.

다음은 lodash를 사용한 가능한 솔루션입니다.

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

언급URL : https://stackoverflow.com/questions/49326890/vuex-dont-nest-state-with-modules