javascript - Vue/Vuex - 两个或多个具有异步调度(ajax)的组件

Question

我使用 vuex 并有一个存储模块来加载我的应用程序中的示例用户列表(用于选择等)。它使用 ajax 并在加载列表后，不再执行此操作(如果列表存在于 vuex 存储中)。我在主应用程序布局中执行此操作，但以异步方式，即没有等待，没有阻塞。 Ajax请求在vuex调度 Action 中。 “加载用户”。

某些页面(例如/users-list)需要来自此用户列表的数据，也称为“loadUsers”，但以其他方式 - 使用等待，加载后渲染页面以避免任何问题。

一切正常，如果用户打开主页(/)然后转到用户列表(/users-lists)，但是如果我们尝试直接打开用户列表，作为浏览器中的第一页，“loadUsers”会被调用两次- 一次来自主布局，第二次来自用户列表页面。

问题是，如何处理这个问题，只加载列表一次？它将在布局中调用，因此，来自用户列表页面的第二次调用也应该等待结果。但如何做到这一点呢？代码位于不同的文件中，我不确定如何执行此操作。在 vuex 上保存来自 ajax 调用的 promise ，并将其返回给其他调用？

在时间轴中现在看起来:

• 加载布局 -> 调用获取列表 -> 待处理的 ajax
• 加载用户列表>调用获取列表->待处理的ajax
• 从布局中获取ajax
• 从用户列表中获取ajax
• 渲染用户列表

Answer 1

我今天用 vuex 中的 saving Promise 测试了这个，它运行得很好。 示例:

async loadUsers ({ state, commit }) {
  if (state.users.length) {
   return state.users
  }  

  if (state.fetchPromise) {
    return state.fetchPromise
  }

  let promise = fetch(usersUrl).then((response) => {
    commit('SET_USERS', response.data)
  })

  commit('SET_PROMISE', promise);
  return promise
}

现在可以在许多完全独立的组件中使用它，而无需多次调用请求，也不会破坏任何内容。例如在主布局上运行它:

created () {
  this.$store.dispatch('users/loadUsers')
}

它的调用没有await，所以是异步的并且不会阻塞渲染页面。 但在用户列表页面上，此列表是必需的，因此我们可以在此处输入:

async beforeMount () {
   await this.$store.dispatch('users/loadUsers')
}

结果:loadUsers 将被分派(dispatch)两次 - 一次从布局，第二次从用户列表，但它只会发送一次请求。此外，用户列表将正确等待响应，而不是尝试渲染没有数据的内容。