创建一个URL并根据其参数设置Vue.js Vuex状态

Question

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

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

实现此功能的最佳方法是什么？这有可能vue-router吗？

Answer 1

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

像这样通过URL传递参数，http://example.com/#/?amount=10并使用进行访问this.$route.query.amount。

vuex使用主要组件的mounted()方法更新商店。