Parent component (Dashboard):
<template>
<div id=”dashboard”>
<Header />
<b-container>
<div>
<b-row>
<b-col>
<Overview />
</b-col>
</b-row>
</div>
</b-container>
</div>
</template>
<script>
import Header from ‘@/components/common/Header’;
import Overview from ‘@/components/dashboard/Overview’;
import { mapGetters } from ‘vuex’;
export default {
name: ‘dashboard’,
components: {
Header,
Overview
},
mounted() {
const sessionId = this.$cookie.get(‘connect.sid’);
this.$store.dispatch(‘user/getUser’, sessionId).then((userData) => {
this.$store.dispatch(‘project/getProject’, userData.data.user);
});
},
computed: {
…mapGetters(‘user’, {
user: ‘getUser’
})
}
}
</script>
Child component (Overview):
<template>
<div class=”overview”>
<div class=”overview__title”>
<h1>
Welcome {user.cn[0]} // Works
</h1>
</div>
<div class=”overview__project”>
<p v-for=”project in runningprojects” :key=”project._id”>
{project.name} // Does not work at refresh
</p>
</div>
</div>
</template>
<script>
import {mapGetters} from ‘vuex’;
export default {
name: ‘dashboard-overview’,
data() {
return {
runningprojects: []
}
},
computed: {
…mapGetters(‘user’, {
user: ‘getUser’
}),
…mapGetters(‘project’, {
projects: ‘getProjects’,
allProjects: ‘getAllProjects’
})
},
mounted() {
console.log(“mounted this.projects”, this.projects);
// add something from this.projects to this.runningprojects
},
methods: {
calcReq() {
…
},
…
}
</script>
In my Dashboard component (parent) I fetch the user data with a vuex action dispatch(‘user/getUser) and after that I fetch the projects of this user dispatch(‘project/getProject).
In my Overview component (child) to show the project information of this user. I call my mapGetters and there is a component variable runningprojects inside data(). In my mounted() lifecycle to push data from my getters to this data array.
The following problem is given:
When I refresh my application, the console.log from my child component mounted() is called before the dispatch jobs are finished in the parent component (dashboard).
It only works if change something in my local files and vue-cli does a live reload.
Solution :
Because of the page lifecycle of the vue.js app. when component renders mounted is called after created and it wont wait for the ajax or any async calls.
One solution would be to not render the child component until the async return
<template>
<div id=”dashboard”>
<Header />
<b-container>
<div>
<b-row>
<b-col>
<Overview v-if=”finished”/>
</b-col>
</b-row>
</div>
</b-container>
</div>
</template>
<script>
import Header from ‘@/components/common/Header’;
import Overview from ‘@/components/dashboard/Overview’;
import { mapGetters } from ‘vuex’;
export default {
name: ‘dashboard’,
data() {
return {
finished: false,
}
},
components: {
Header,
Overview
},
mounted() {
const sessionId = this.$cookie.get(‘connect.sid’);
this.$store.dispatch(‘user/getUser’, sessionId).then((userData) => {
this.$store.dispatch(‘project/getProject’, userData.data.user);
this.finished = true;
});
},
computed: {
…mapGetters(‘user’, {
user: ‘getUser’
})
}
}
</script>
Just add a v-if in the child component and when dispatch has return then set the value to true which will render the child component and the then the mounted will have the values you want
Other solution would be.
Use updated function instead of mounted and which will be called when ever there is a change in the state.