Vue.js 中：如何从搜索上下文之外重新调用搜索函数，实现排序功能？

在 Vue.js 中从搜索上下文之外重新调用相同的搜索函数

问题概述

在 Vue.js 中，我们遇到了一个问题，即从搜索上下文的之外重新调用相同的搜索函数。在我们的应用程序中，用户可以进行搜索，然后将结果推送到 Vuex 存储中，并导航到结果页面。但是，由于数据量很大，结果被分页加载，并且在首次加载时，我们只有每个用户的 ID，而没有其他信息。

痛点

当用户想要按某个列（例如，用户名称）进行排序时，由于我们只有用户的 ID，因此无法在当前上下文中进行排序。我们需要重新执行在搜索页面中进行的相同搜索，但添加了一个包含排序信息的其他参数。

解决方案

为了解决这个问题，我们采用了以下解决方案：

1. 在搜索页面中，将搜索参数存储在 Vuex 存储中。
2. 在结果页面中，当用户单击排序列时，从 Vuex 存储中获取搜索参数，并添加排序信息。
3. 重新执行搜索函数，使用更新的搜索参数。

实施

以下是实施此解决方案的步骤：

// 搜索页面
const search = (state) => state.searchRequest;

// 结果页面
async sortUsers(sortRequest) {
  const searchRequest = this.$store.getters.search;
  const updatedRequest = {...searchRequest, ...sortRequest};
  await this.$store.dispatch('searchUser', updatedRequest);
}

注意事项

在实施此解决方案时，需要注意以下事项：

• 确保搜索参数在 Vuex 存储中正确存储。
• 在重新执行搜索函数时，使用更新的搜索参数。
• 考虑在搜索过程中显示一个加载指示器，因为重新执行搜索可能需要一段时间。

结论

通过将搜索参数存储在 Vuex 存储中，并从搜索上下文的之外重新执行相同的搜索函数，我们能够为用户提供按多个列进行排序的功能，即使只有部分用户数据可用。

常见问题解答

1. 如何将搜索参数存储在 Vuex 存储中？

   const search = (state) => state.searchRequest;
   

2. 如何在结果页面中获取搜索参数？

   const searchRequest = this.$store.getters.search;
   

3. 如何重新执行搜索函数？

   await this.$store.dispatch('searchUser', updatedRequest);
   

4. 搜索过程中如何显示加载指示器？

   this.$store.dispatch('startLoading');
   

5. 搜索完成后如何隐藏加载指示器？

   this.$store.dispatch('endLoading');