Nuxt.js：即使在刷新页面后，在 Vuex 中保存查询的最佳或实用方法是什么？

Question

我正在使用 Nuxt 前端和 Node-Mongo 后端创建一个类似 Reddit 的 Web 应用程序。

但由于我缺乏实用的编程知识，我在处理带有查询的文章（或帖子）列表时遇到了一些麻烦。

以下是应用程序应如何工作的说明：

(1) 路由：/page/index.vue 使用asyncData({app, query})，我使用 axios 从后端请求数据。 文章列表可以用genre和sort=${sortQuery}排序。 使用 Nuxt 提供的watchQuery: true 从后端检索排序的文章列表没有问题。

(2) 路由：/page/:id/index.vue 这是用户可以阅读单个文章的地方。 当页面被加载时，asyncData 被执行以检索currentArticle 数据以及ArticleList。 当用户从/page 有机地移动到/page/:id 时，由于Query 已存储在Vuex Store 中，因此会保留按查询排序的文章列表。

问题： 但是，当用户刷新页面时，无法检索排序后的文章列表，因为 Vuex 存储的Query 不存在...

即使在刷新或奇怪的路由方式之后，我也想保留用于从后端重新加载文章列表的最后一个查询。

为了解决这个问题，我想把 Vuex Query 存储在 web 的 LocalStorage 中，但我觉得必须有一个更简单、更实用的方法来实现这个......

有人可以就如何实际解决这个问题发表评论吗？

如果需要更多信息，请告诉我！

提前感谢您的时间:)

Answer 1

我会在第一页的 nuxt 链接中传递查询参数，例如：

<nuxt-link :to="{ path: 'page', query: { genre: 'x' }}">My Article</nuxt-link>

这样排序条件将保留在 url 中，您可以从任何地方/与任何人链接或共享它。