Vue / Vuex-模块二取决于模块一，模块一从服务器获取数据

Question

看一下这个：

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模块，因为account模块具有用户特定的设置。假设other.state.list取决于account.state.settings.listOrder。但是，我希望account模块的数据来自服务器。这是异步的。因此，当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表示我应该能够做到。

Answer 1

好的，所以您有两个模块。一个具有从服务器获取的状态，另一个具有依赖于第一个的状态，对吗？我建议采用以下方法：首先，将模块设置为空的“状态”。然后在accountModule中创建一个操作，以设置服务器的状态。使用吸气剂对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')}

Answer 2

您的最后一个代码块因await必须在内部async函数而无法正常工作。请记住，await关键字仅在异步函数内有效。如果在异步函数的主体之外使用它，则会收到一个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: {  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)  }}...