0
votes

Transférer des données d'un composant à un autre

J'ai un composant qui appelle mon API backend. Cela me fournit ensuite les données que j'utilise pour le composant. Je veux maintenant créer un autre composant qui utilise également ces données. Alors que je pourrais simplement faire un autre appel à l'API qui semble inutile.

Donc, dans Profile.vue, j'ai ceci dans la fonction created ().

<template>
  <section>
      <h1>{{profileDatas.profileDatas}}</h1>
  </section>
</template>

<script>
import  { bus } from '../main';

export default {
    name: 'MatchHistory',
    data() {
        return {
            profileDatas: null
        }
    },
    beforeCreate() {
        //Add OR Remove classes and images etc..
    },
    async created() {
        bus.$on('profileData', obj => {
            this.profileDatas = obj;
        });
    }
};
</script>

J'ai alors un autre composant enfant que j'ai connecté en utilisant le routeur Vue, c'est pour afficher des informations supplémentaires.

Composant MatchHistory

<script>
import axios from 'axios';
import { bus } from '../main';


export default {
    name: 'Profile',
    data() {
        return {
            loading: false,
            error: null,
            profileData: null,
            getImageUrl: function(id) {
                return `http://ddragon.leagueoflegends.com/cdn/9.16.1/img/profileicon/` + id + `.png`;
            }
        }
    },
    beforeCreate() {
        //Add OR Remove classes and images etc..
    },
    async created() {
        //Once page is loaded do this
        this.loading = true;
        try {
            const response = await axios.get(`/api/profile/${this.$route.params.platform}/${this.$route.params.name}`);
            this.profileData = response.data;
            this.loading = false;
            bus.$emit('profileData', this.profileData)

        } catch (error) {
            this.loading = false;
            this.error = error.response.data.message;
        }
    }
};
</script>

Donc, je veux prendre les informations et afficher les données que j'ai transférées.

vue.js vue-component vue-router components

0 commentaires

3 Réponses :

1
votes

Vous pouvez utiliser vm. $ emit pour créer un Eventbus

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

// split instance
const EventBus = new Vue({}) 
class IApp extends Vue {}

IApp.mixin({

  beforeCreate: function(){
    this.EventBus = EventBus
  }
})


const App = new IApp({
  created(){
    this.EventBus.$on('from-mounted', console.log)
  },
  mounted(){
    this.EventBus.$emit('from-mounted', 'Its a me! Mounted')
  }
}).$mount('#app')

autres lectures

0 commentaires

0
votes

Vous pouvez utiliser VUEX qui est un système de gestion d'état pour Vue.

Lorsque vous passez un appel API et obtenez les données dont vous avez besoin, vous pouvez COMMIT a MUTATION et transmettez-lui vos données. Ce qu'il fera, il mettra à jour votre STATE et tous vos composants auront accès à son état (données)

Dans votre async created () , lorsque vous obtenez une réponse, validez simplement la mutation dans votre boutique afin de mettre à jour l'état. (exemple omis ici car le magasin vuex aura besoin d'une configuration avant de pouvoir effectuer des mutations)

Ensuite, dans votre composant enfant,

data(){
return {
   profileDatas: null
}
},
async created() {
    this.profileDatas = $store.state.myData;
}

Cela peut ressembler à un exagéré dans votre cas, mais cette approche est très bénéfique lorsque vous travaillez avec des données externes qui doivent être partagées entre plusieurs composants

1 commentaires

myData sera le nom que vous avez donné à votre variable d'état

1
votes

Mon hypothèse est basée sur le fait que ces composants sont définis pour deux routes distinctes et qu'un bus d'événements peut ne pas fonctionner pour votre situation en fonction de la conception de votre application. Il existe plusieurs façons de résoudre ce problème. Deux d’entre eux sont énumérés ci-dessous.

Vuex (pour la gestion de l'état de Vue)
Toute option de stockage local - LocalStorage / SessionStorage / IndexDB e.t.c

pour plus d'informations sur VueX, visitez https://vuex.vuejs.org/.

pour plus d'informations sur Localstorage, visitez https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage .

pour plus d'informations sur le stockage de session, visitez https://developer.mozilla.org/en-US/docs/Web/API / Window / sessionStorage

Le flux est à peu près le même pour toutes les options.

Récupérez vos données à partir d'une API en utilisant axios comme vous l'avez fait ci-dessus dans Profile.vue
Stockez les données récupérées avec VueX ou stockage local / de session
Récupérez les données de Vuex ou du stockage local / de session dans la méthode créée du composant MatchHistory.vue

Pour les options de stockage local / session, vous devrez convertir votre objet en une chaîne json car seules les chaînes peuvent être stockées dans le stockage. voir ci-dessous.

dans Profile.vue (créé)

async created() {
    var profileData = localStorage.getItem('yourstoragekey')
    if(profileData){
        profileData = JSON.parse(profileData );
        this.profileData = profileData 
    }
}

Dans MatchHistory.Vue (créé)

const response = await axios.get(........)
if(response){
    localStorage.setItem('yourstoragekey', JSON.stringify(response));
}

0 commentaires