javascript - Nuxt.js-共享持久数据的链接: how the receiver can view the data?

Question

在我的 Nuxt/vuetify 应用程序中，我有一组用户应通过用户界面完成的操作/步骤。在每个步骤中，都会发出异步请求来获取数据，然后将数据保存在 store/index.js 中。

这些步骤和后续选择用于构建每种情况/点击的 URL 路径。

我使用了一个插件来保存数据，以便用户可以通过单击浏览器箭头符号(历史记录)来单击后退和前进，并查看前面的步骤以及数据的保存和显示。

现在我正在考虑用户共享他所实现的任何步骤的链接的情况(意味着他在一系列步骤之后登陆到页面并显示他选择的数据):如果他与其他人共享链接在互联网上，链接的接收者将看不到任何显示的数据，因为我使用 store/index.js 来存储它并使用插件来保存 Nuxt 状态。

问题:有哪些方法/替代方案可以实现我的目标？我想允许用户共享他完成的最后一步的链接，并且链接的接收者应该查看发送者选择的数据。

Answer 1

您可以通过 url 中的查询字符串存储数据。例如，将 url 设置为如下所示:

https://example.com/form/?answer1=3&answer2=4&answer3=blah

这将使表单无状态，并且不受刷新影响。如果用户共享链接，您可以看到查询字符串中存在哪些答案已经选择了哪些答案，并显示适当的表单以继续选择。

注意:在带有 vue-router 的 Vue js 中，可以像这样访问查询字符串: this.$route.query['querystringkey']