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?

Daniel D · Accepted Answer · 2017-07-17 01:14:46Z

9

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

answered Jul 17, 2017 at 1:14

Daniel D

99810 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

trainoasis Over a year ago

What if the whole vuex state needs to be stored, like 50+ variables and not just strings? And you wanted to have a unique hash-ID based on that, for example yourapp.com/#/?id=IAF3D0K. How would you approach it

mygeea · Accepted Answer · 2017-07-16 23:56:07Z

2

If I understand you correctly the vue-router should do exactly that.

have a look at the documentation where they send the user id. You can pass as many parameters as you like.

https://router.vuejs.org/en/essentials/dynamic-matching.html

note: you may consider rebuilding application paths using the router.

answered Jul 16, 2017 at 23:56

mygeea

4643 silver badges10 bronze badges

2 Comments

Daniel D Over a year ago

Thanks. I'll take a look at this. I know very little about vue-router right now but I had a hunch that it might be part of the answer. My application actually has no paths other than the root path. It's simply a one page recipe calculator. So the only thing I'll need vue-router for is this, assuming vue-router can do it. I guess I'll find out after I read more of the documentation.

Daniel D Over a year ago

So I read more about vue-router and learned about the $router.query property. This should do the trick. I can pass in a parameter like http://example.com/#/?amount=10 and use this.$route.query.amount to retrieve the values during the mounting phase and update the vuex store.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related