Vue/Vuex - 모듈2는 모듈1에 의존하며 모듈1은 서버로부터 데이터를 취득합니다.

Vue/Vuex - 모듈2는 모듈1에 의존하며 모듈1은 서버로부터 데이터를 취득합니다.

이것 좀 봐.

import accountModule from '@/store/modules/account/account';
import otherModule from '@/store/modules/other/other';

export default new Vuex.Store({
  modules: {
    account: accountModule,
    other: otherModule,
  }
});

의 데이터 초기화other에 따라 다르다account모듈화(module:account모듈에는 사용자 고유의 설정이 있습니다.가정하다other.state.list에 의존하다account.state.settings.listOrder하지만, 나는 그 데이터를 원한다.accountmodule을 지정합니다.비동기입니다.그래서 언제other셋업하려고 하는 겁니다.그냥 참고만 할 수 있는 게 아니라account.state.settings.listOrder서버로부터의 응답이 아직 돌아오지 않았을 가능성이 있기 때문입니다.

나는 약속을 내보내려고 했다.accountModule모듈 자체에서 해결됩니다.하지만 그 접근법은 효과가 없는 것 같다.

import accountModulePromise from '@/store/modules/account/account';

accountModulePromise.then(function (accountMoudle) {
  import otherModule from '@/store/modules/other/other';

  ...
});

이렇게 말하면 오해가 생깁니다.import문장은 최상위 수준이어야 합니다.

다음 항목도 작동하지 않습니다.

let accountModule = await import '@/store/modules/account/account';
import otherModule from '@/store/modules/other/other';
...

라고 말하면 오해가 난다await는 예약어입니다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import에서 할 수 있어야 한다고 해서 헷갈리네요.

다음 이유로 인해 마지막 코드 블록이 작동하지 않았습니다.await안에 있어야 한다async기능.

wait 키워드는 비동기 함수 내에서만 유효합니다.비동기 함수 본문 밖에서 사용하면 SyntaxError가 나타납니다.

MDN에서.

다이내믹 모듈 등록을 사용할 수 있습니다.

accountModulePromise.then(async () => {
  let otherModule = await import('@/store/modules/other/other');
  store.registerModule('other', otherModule.default);
});

단, 상태 또는 디스패치액션을 취득하려면 모듈이 등록되어 있는지 여부를 확인해야 합니다.이것은 매우 불량합니다.

내 생각에는 모듈 구조를 서로 분리하도록 재설계하는 것이 좋을 것 같습니다.초기화 코드 이동 시도main.js또는App.vue다음으로 디스패치액션을 실행하여 모듈 상태를 업데이트합니다.

---

갱신

당신의 마지막 업데이트로부터 당신의 스토어를 분리하기 위한 또 다른 아이디어, 나는 당신이 저장해야 한다고 생각합니다.list순서 없이 사용할 때만 정렬할 수 있습니다.이 조작은, 다음과 같이 실행할 수 있습니다.

계산된 속성:

...
computed: {
  list () {
    let list = this.$store.state.other.list
    let order = this.$store.state.account.settings.listOrder
    if (!list || !order) return []
    return someSort(list, order)
  }
},

beforeCreate () {
  this.$store.dispatch('other/fetchList')
  this.$store.dispatch('account/fetchListOrder')
}
...

또는 Vuex getters:

...
getters: {
  list: (state) => (order) => {
    return someSort(state.list, order)
  }
}
...

...
computed: {
  list () {
    let order = this.$store.state.account.settings.listOrder
    return this.$store.getters['others/list'](order)
  }
}
...

두 개의 모듈이 있습니다.하나는 서버에서 가져온 상태이고 다른 하나는 첫 번째 상태에 종속된 상태입니다.

다음과 같은 접근방식을 제안합니다.

처음에 빈 '상태'로 모듈을 설정합니다.그런 다음 accountModule 내에 액션을 생성하여 서버에서 상태를 설정합니다.에 getter를 사용하다other목록을 주문합니다.마지막으로 앱 생성 시 액션을 디스패치합니다.

const account = {
    namespaced: true,
    state: {
        listOrder: ''
    },
    mutations: {
        setListOrder (state, newListOrder) {
            state.listOrder = newListOrder
        }
    },
    actions: {
        async fetchServerState (ctx) {
            let result = await fetch("/path/to/server")
            ctx.commit('setListOrder', result.listOrder) 
            // or whatever your response is, this is an example
        }
    }
}

const other = {
    namespaced: true,
    state: {
        unorderedList: []
    },
    getters: {
        list (state, getters, rootState) {
            return someSort(state.unorderedList, rootState.account.listOrder);
        }
    }
}

App.vue(또는 장소) 내에서

created () {
    this.$store.dispatch('account/fetchServerState')
}

언급URL : https://stackoverflow.com/questions/56093420/vue-vuex-module-two-depends-on-module-one-and-module-one-gets-data-from-serve