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)

  }

}

...