Vue/Vuex - 两个或多个具有异步调度（ajax）的组件

Question

我使用 vuex 并有一个商店模块来加载我的应用程序中的例如用户列表（用于选择等）。它使用 ajax 和加载列表后，不再执行此操作（如果列表存在于 vuex 存储中）。我在主应用程序布局中这样做，但以异步方式即没有等待，没有阻塞。Ajax 请求在 vuex dispatch action 中。“加载用户”。某些页面（例如 /users-list）需要来自此用户列表的数据，也称为“loadUsers”，但以其他方式 - 使用等待，加载后渲染页面以避免任何问题。一切正常，如果用户打开主页面（/）然后转到用户列表（/users-lists），但是如果我们尝试直接打开用户列表，作为浏览器的第一页，“loadUsers”被调用两次 - 一次从主布局，第二个来自用户列表页面。问题是，如何处理这个，只加载一次列表？它将在布局中调用，因此，来自用户列表页面的第二次调用也应该等待结果。但是如何做到这一点呢？代码位于不同的文件中，我不确定如何执行此操作。也在 vuex 上保存来自 ajax 调用的承诺，并将其返回给其他调用？在时间线中，它现在看起来：加载布局 -> 调用获取列表 -> 待处理的 ajax加载用户列表 > 调用获取列表 - > 待处理的 ajax从布局中获取ajax从用户列表中获取ajax呈现用户列表

Answer 1

我今天在 vuex 中使用保存承诺测试了这个，它完美地工作。例子：

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

}

现在可以在许多完全独立的组件中使用它，而无需多次调用 request 并且不会破坏任何东西。例如它在主布局上运行它：

created () {

  this.$store.dispatch('users/loadUsers')

}

它是在没有等待的情况下调用的，因此是异步的并且不会阻止渲染页面。但是在用户列表页面上，此列表是必需的，因此我们可以在这里放置：

async beforeMount () {

   await this.$store.dispatch('users/loadUsers')

}

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

Answer 2

我不得不处理类似的事情，这就是我解决它的方法：

在您的主文件中，定义一个新的状态变量，称为pending。你可以在你的loadUsers操作中使用它：

async loadUsers ({ state, commit }) {

  if (state.users.length) {

   return state.users;

  }  

  if (state.isPending) {

    return;

  }

  commit('SET_PENDING_STATE', true);

  const users = await fetch(usersUrl);

  commit('SET_PENDING_STATE', false);

  commit('SET_USERS', users);

}