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 中导出一个promise，它可以通过模块本身解决。但这种方法似乎行不通。

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

您的最后一个代码块不起作用，因为 await 必须在 async 函数内。

请记住，await 关键字仅在异步函数中有效。如果 你在异步函数体之外使用它，你会得到一个 语法错误。

来自MDN。

你可以使用Dynamic Module Registration:

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

Answer 2

好的，所以你有两个模块。一个具有从服务器获取的状态，另一个具有依赖于第一个状态的状态，对吗？

我会建议以下方法：

首先将您的模块设置为空“状态”。然后在 accountModule 中创建一个动作来设置服务器的状态。在other 上使用getter 对列表进行排序。最后，在应用创建时分派您的操作。

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