Creating a URL & setting Vue.js Vuex state from its parameters

Question

I have a SPA built in Vue.js that lets the user input several values to create something like a recipe. All these values are stored in Vuex state. I would like to be able to create a URL using the state values that the user entered so that another user can load the app with those values already entered. Essentially I want to allow users to share the recipes they created in my app by sharing a URL.

I'm imagining a "share" button which will copy the created URL to the user's clipboard which they can then post on social media or whatever. Then when someone visits the link, they will go to my app and the vuex state values will automatically be updated to the parameter values found in the URL.

What is the best way to achieve this functionality? Is this something that is possible with vue-router?

Answer 1

Use the $route.query property provided by vue-router.

Pass in a parameters through your URL like http://example.com/#/?amount=10 and access them with this.$route.query.amount.

Update your vuex store in the main component's mounted() method.

Official Documentation for the Route object