Hi gang,
I am developing a SPA application (I think, I understand this term) in VueJS, with Vue-router. I started a project using vue-cli, checking in vue-router, and also vuex (I think I will need it later), so I have some scaffolded code. I have two views (linked in vue-router), when I switch to second view, and then change it back to the first one, all values in form inputs (text inputs, and selected option in select) - the so called state of component? As I understand? - are gone, the forms is cleared and reset to default values. How can I preserve these values in the most easy way? Should I use vuex for it, or go for something else? I will need this, I am planning to have input data in first view, and in second view some visualisation based on input from first view (It doesnt matter though).
So far what I have tried to solve this - I read about something as “component Lifecycle”, the “mounted()”, “beforeDestroy()” and “destroy()” (functions? Lifecycle hooks? I don’t know the appropriate term) I checked that when I am switching view, when I defined “beforeDestroy()” and “destroy()” in the view component (functions? Lifecycle Hooks probably, don’t know what is the appropriate term) - the are called (I just console.log some dummy text). So - I guess I should do something in the “beforeDestroy()” thing, but I have no idea, what.
Please advice, if need more details, ask
Hello and welcome to the forum 
!
You should be passing the data using the router. If your form can be filled by some external source (be it the URL query path or another component), then you should check if the data is present when the component is created:
<template>
<!-- Here goes your Form -->
</template>
<script>
export default {
created: function() {
if (this.$router.query.myData) {
this.myData = this.$router.query.myData
// or the entire object:
// this.myData = this.$router.query
}
},
data: function() {
return {
myData: {}
}
}
}
</script>
Read these articles:
Hi skaparate, thanks for warm welcome and for quick response.
As far as I read the docs of Vue-Router (https://router.vuejs.org/api/#route-object-properties), $route.query is, as You also mentioned above, part of URL. What should I use though, if I dont wan’t to pass anything by URL?
The second link You posted, it is broken link I think (destination misplaced)
Now, when I am thinking about it, it will be not my only problem. I have drawn a little graph to show what I try to accomplish.
I have form in Settings component (as inputs in template; it can be the separate component though). Based on the data passed in the form, the RightChart is rendered (this actually is quite straightforward, I am using props, as RightChart is child of Settings component). Then I am switch tab from Settings to Input/Output, and coming back - data passed in form is gone. That is the first problem.
Secondly, based on data in form in Settings view/component, I want to render charts in RightChart (named in that way because I will have some grid, and it it on the right side of page), in InputChart and in OutputChart. RightChart is quite easy as I can use props. How I should render InputChart and OutputChart? By using Vuex, maybe? Another, more ‘obvious’ way is - I think - emitting events in “up” direction up to root component, then by props to InputView to InputChart and OutputView to OutputChart (with props, “down” direction) - but it seems too complicated, probably using vuex is just what I need?
Thanks
In that case you cannot use the router.
Yeah, sorry about that 
. Now it’s fixed, though it is not relevant anymore since you don’t want to use the query path.
Yes, you don’t have many options, since this is part of the state of the application and vuex does just that: manage the application state.
Note, though, that the state is volatile, which means the data is lost after a page reload.