List isn't dynamically displayed in vue.js

Question

I'm new to vue.js and learning on my own with the vue doc, youtube videos and such. I've been searching for a while and looking at youtube tutorials and haven't found an answer so far, hope you guys will be able to help me.

So here's my issue, I'm building a web app and I need to display a list of objects dynamically but it doesn't show the first time I'm loading that page. I have to go to some other route and come back to see it, so I guess I'm misunderstanding some life cycle or something from that field of expertise...

I'm using the vuex to store and retrieve my data as seen below :

import Vue from 'vue';

const state = {

    journees: {},
};

const getters = {

    getJourneeList(state) {
        return state.journees;
    }
};

const mutations = {
   
    GET_LIST(state, journees) {
        state.journees = journees;
    }
};

const actions = {

    getJourneesUser({commit}) {
        Vue.axios.get('/journee/')
            .then( res => {
                commit('GET_LIST', res.data)
            })
            .catch((err) => console.log(err))
    }
};



export default {
    state,
    getters,
    mutations,
    actions
};

And then I'm getting it in my vue like this:

<template>
  <v-container>
      <v-card v-for="heure in heures" :key="heure._id">
        <v-card-title>{{ heure }}</v-card-title>
      </v-card>
  </v-container>
</template>

<script>
export default {
  name: "TimeList",
  data() {
    return {
      heures: this.$store.getters.getJourneeList,
    }
  },
  created() {
    this.$store.dispatch('getJourneesUser');
  }
}
</script>

Answer 1

You need to use mapState and use it inside computed value because then computed value will response to change in state. You do not need getter but if you want here is the version with getter. It should be like this if your store module called journees:

without getter

<template>
    <v-container>
        <v-card v-for="heure in journees" :key="heure._id">
            <v-card-title>{{ heure }}</v-card-title>
        </v-card>
    </v-container>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "TimeList",
    computed: {
        ...mapState(["journees"])
    },
    created() {
        this.$store.dispatch("getJourneesUser");
    },
};
</script>

with getter

<template>
    <v-container>
        <v-card v-for="heure in getJourneeList" :key="heure._id">
            <v-card-title>{{ heure }}</v-card-title>
        </v-card>
    </v-container>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    name: "TimeList",
    computed: {
        ...mapGetters(["getJourneeList"])
    },
    created() {
        this.$store.dispatch("getJourneesUser");
    },
};
</script>