创建 URL 并从其参数设置 Vue.js Vuex 状态答案

【问题标题】：Creating a URL & setting Vue.js Vuex state from its parameters创建 URL 并从其参数设置 Vue.js Vuex 状态
【发布时间】：2017-07-16 23:41:44
【问题描述】：

我有一个内置于 Vue.js 的 SPA，它允许用户输入多个值来创建类似食谱的东西。所有这些值都存储在 Vuex 状态中。我希望能够使用用户输入的状态值创建一个 URL，以便其他用户可以使用已经输入的这些值加载应用程序。本质上，我希望允许用户通过共享 URL 来共享他们在我的应用中创建的食谱。

我正在想象一个“分享”按钮，它将创建的 URL 复制到用户的剪贴板，然后他们可以将其发布到社交媒体或其他任何地方。然后当有人访问该链接时，他们将转到我的应用程序，并且 vuex 状态值将自动更新为 URL 中的参数值。

实现此功能的最佳方法是什么？ vue-router 可以做到这一点吗？

【问题讨论】：

【解决方案1】：

使用vue-router提供的$route.query属性。

通过您的 URL 传递参数，例如 http://example.com/#/?amount=10，并使用 this.$route.query.amount 访问它们。

在主组件的 mounted() 方法中更新您的 vuex 存储。

【讨论】：

如果需要存储整个 vuex 状态，比如 50 多个变量，而不仅仅是字符串，该怎么办？并且您希望拥有一个基于此的唯一哈希 ID，例如 yourapp.com/#/?id=IAF3D0K。你会如何处理它

【解决方案2】：

如果我理解正确，vue-router 应该会这样做。

查看他们发送用户 ID 的文档。您可以传递任意数量的参数。

注意：您可以考虑使用路由器重建应用程序路径。

【讨论】：

谢谢。我会看看这个。我现在对 vue-router 知之甚少，但我有一种预感，它可能是答案的一部分。我的应用程序实际上没有根路径以外的路径。它只是一个单页食谱计算器。所以我唯一需要 vue-router 的就是这个，假设 vue-router 可以做到。我想我会在阅读更多文档后找到答案。
所以我阅读了更多关于vue-router 的信息并了解了$router.query 属性。这应该可以解决问题。我可以传入http://example.com/#/?amount=10 之类的参数并使用this.$route.query.amount 在安装阶段检索值并更新vuex 存储。