VueJs : Problème d'actualisation de variable et d'affichage

Krokilex
Javascript

Bonjour,

Je suis en train de suivre la formation sur VueJs et je testait donc quelques trucs de mon côté.

Avec Vue Resource et je récupere un nom sur json placeholder, je le stock dans un store et je l'affiche dans mon composant.

// Fonction Vue Resource récupérant les datas
function () {
    this.$http.get('https://jsonplaceholder.typicode.com/users').then(response => {
      userStore.setName(response.body[0].name)
    }, response => {
      console.log(response)
    })
  }
// Mon composant affichant ce que j'ai récupéré avant

<template>
    <div>
        <h1> {{ name }}</h1>
        <input type="text" v-model="name">
    </div>
</template>

<script>
    import userStore from './store/userStore.js'

    export default {
        data () {
            return {
                name: userStore.state.name,

            }
        }
    } 
</script>

Lorsque j'execute le code je ne rencontre pas de problème et si je me rend sur la page où se situe le composant tout est bien afficher.

Cependant lorsque je refresh la page où se situe le composant le nom ne s'affiche plus, et j'ai besoin de changer de page et revenir sur la page pour afficher le nom et faire en sorte que Vue comprenne bien qu'il y a eu une modification.

J'ai déjà essayé de passer ma fonction récupérant les datas au niveau du beforeCreate dans le composant et aussi dans l'instance avant le render mais cela n'a rien changé.

Merci en avance de vos réponses

Aucune réponse