Fetching data from parent-component after reload a route with vue and vue-router

Question

I have a component showing multiple routes (Step1, Step2, Step3...) on after each other. I navigate and pass properties like

<router-view
  @next-button-step1="
    $router.push({
      name: 'Step2',
      params: { myprop: thisprop },
    })
    "
    [...]
</router-view>

with the routes defined like

const routes = [
  {
    path: "/s2",
    name: "Step2",
    component: Step2,
    props: true,
  },

This works well, until I reload a page/route, because the the data is lost. So I kind of want to fetch the data from the parent, after the component is loaded.

One of my ideas was using the local storage, but this does not feel right.

I am a newbie to Vue and I would like to ask what's the best practice here. Is it vuex like described here Reload component with vue-router? I'd appreciate a hint.

Yeah you definitely don't want to use localStorage for this. You should look into the Vue lifecycle vuejs.org/v2/guide/instance.html - fetch the data and then set it in a Vuex store would likely be ideal, alternatively you could pass the data through as props — maxshuty

Joshua Angnoe Joshua Angnoe · Accepted Answer · 2020-12-28T13:20:41

If localStorage is suitable depends on the use case.

You say that data is lost when you reload the page/route. It's perfectly possible to store this data to prevent data-loss on route change/reload. But changing/reloading the page will only be solved either by storing data in localStorage (and retrieving from localStorage on page init), or storing it on the server and retrieving it on page init...

Vuex may help you with the route change/reload part, but even Vuex won't help you with the page change/reload.

I will show you an example of how to save the data for the first case: route changes and reloads, because this may be achieved without adding Vuex. We will do this by having the data inside a parent component and passing this data to our routes. When a route changes the data it should emit an update-event (including the updated data) and the parent should store the changed data.

I'll show an example scenario in which the parent holds all the data. The routes are responsible for editing different aspects of the data. Each time i switch between a route the parent supplies the data.

A working example can be found here: https://jsfiddle.net/b2pyv356/

// parent component / app.vue
<template>

   <div>
        <router-view 
              :state="state" 
              @updatestate="updateState"
        ></router-view>
        
        <pre>Parent state: {{state}} </pre>
    </div>
    

</template>
<script>
export default {
    data() {
        return {
            state: {
                name: 'name',
                lastname: 'lastname'
            }
        }
    },
    methods: {
        updateState(state) {
            this.state = state;
        }
    }
};
</script>

// page1.vue
<template>

    <div>
        Route 1: State is: 
        <pre>{{state}}</pre>
        <div>
            Name: <input v-model="state.name">
            <button @click="$emit('updateState', state)">Save</button><br>
        </div>
        <router-link to="/page2">Next step</router-link>
    </div>

</template>
<script>
export default { props: ['state'] }
</script>

// page2.vue
<template>

    <div>
        Route 2: State is <pre>{{state}}</pre>
        Name: <input v-model="state.name">
        <button @click="$emit('updateState', state)">Save</button><br>
        <router-link to="/">Previous page</router-link>
    </div>

</template>
<script>
export default { props: ['state'] }
</script>

Persisting data:

On updateState you could store the data in localStorage
You could store some data in the request url ($router.params) or page query string. This has limits: some browsers enforce limits on how long a url may be. You are also responsible to validate/sanitize incoming data, do not trust that it won't be tempered with. Same applies to localStorage data btw. Common cases include storing a search query: if you refresh the page you still have the search query.
Let the backend save the data and retrieve the user's data on page load.

Fetching data from parent-component after reload a route with vue and vue-router

1 Answers