Comment vue met-il les données obtenues par l'interface dans vuex

Vue est un framework JavaScript populaire qui aide les développeurs à créer des applications Web interactives et dynamiques. Vue est largement admirée pour sa facilité d'utilisation et sa flexibilité. Vue aide également à gérer l'état des données de votre application en fournissant un plugin appelé Vuex. Vuex est un modèle de gestion d'état qui centralise tous les états des applications en un seul endroit afin de gérer et assurer leur synchronisation entre les différentes parties.

Lors du développement d'une application Web à l'aide de Vue, vous devez généralement obtenir des données du serveur pour restituer la vue. Ces données peuvent être obtenues depuis l'API via des requêtes HTTP puis utilisées dans les composants Vue. Dans ce cas, Vuex peut nous aider à centraliser l'état des données afin qu'elles puissent être partagées dans l'ensemble de l'application.

Dans cet article, nous présenterons comment mettre les données obtenues à partir de l'API dans Vuex. Nous utiliserons les étapes suivantes :

1. Créer un stockage Vuex
2. Obtenir des données API et les stocker dans Vuex
3. Utiliser les données stockées dans les composants Vue

Créer un stockage Vuex

Pour utiliser Vuex pour stocker des données, nous avons besoin de Créer un fichier store.js. Dans le fichier store.js, nous devons d'abord importer Vue et Vuex. Ensuite, nous devons utiliser Vue.use(Vuex) pour enregistrer le plugin Vuex.

importer Vue depuis 'vue'
importer Vuex depuis 'vuex'

Vue.use(Vuex)

Dans le fichier store.js, nous allons créer une instance de magasin Vuex qui contiendra l'état que nous souhaitons partager.

export const store = new Vuex.Store({
state: {

data: []

},
mutations: {

setData(state, payload) {
  state.data = payload
}

}
})

Dans le code ci-dessus, nous définissons un état appelé data, et fournissons une méthode nommé setData dans les mutations, qui est utilisé pour stocker les données dans l'état des données.

Ensuite, nous devons exporter l'instance du magasin afin de l'utiliser dans le composant Vue.

Obtenez des données API et stockez-les dans Vuex

Dans le composant Vue, nous pouvons utiliser axios ou une autre bibliothèque HTTP pour obtenir des données de l'API. Dans cet article, nous utiliserons axios pour obtenir des données.

Afin d'obtenir les données et de les stocker dans Vuex, nous devons appeler la méthode actions dans le composant Vue. Dans le fichier store.js, nous fournirons une méthode d'actions qui recevra les données et appellera la méthode setData définie dans les mutations pour les stocker dans l'état des données.

Ce qui suit est le code complet dans le fichier store.js :

importer Vue depuis 'vue'
importer Vuex depuis 'vuex'
importer axios depuis 'axios'

Vue.use(Vuex)

export const store = new Vuex.Store({
state : {

data: []

},
mutations : {

setData(state, payload) {
  state.data = payload
}

},
actions : {

getData({commit}) {
  axios.get('https://api.example.com/data')
    .then(response => {
      commit('setData', response.data)
    })
}

}
})

Dans le code ci-dessus, nous définissons une méthode appelée actions getData méthode. Cette méthode utilise axios pour obtenir des données à partir de l'adresse https://api.example.com/data. Lorsque l'acquisition réussit, elle utilisera la méthode commit pour appeler la méthode de mutations setData afin de stocker les données dans l'état des données.

Utiliser les données stockées dans les composants Vue

L'état défini dans le fichier store.js peut être utilisé dans les composants Vue. Vous trouverez ci-dessous un exemple de composant qui obtiendra les données de l'état des données dans le fichier store.js et les affichera dans le modèle.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<ul>
  <li v-for="item in data" :key="item.id">
    {{ item.name }}
  </li>
</ul>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { mapState, mapActions } from 'vuex'

export default {
calculé : {

...mapState(['data']),

},
created() {

this.getData()

},
méthodes : {

...mapActions(['getData']),

}
}
2cacc6d41bbb37262a98f745aa00fbf0

Dans le code ci-dessus, nous utilisons les méthodes mapState et mapActions fournies par Vuex . À l'aide de mapState, nous mappons l'état des données aux propriétés calculées du composant. À l'aide de mapActions, nous mappons la méthode des actions getData à la méthode du composant.

Lorsque le composant est créé, nous appellerons la fonction hook créée et y appellerons la méthode getData pour charger les données dans l'état des données dans le fichier store.js. Nous pouvons boucler les données obtenues via l'instruction v-for et les afficher dans le modèle.

Conclusion

Le processus de stockage des données obtenues à partir de l'API dans Vuex est tel que mentionné ci-dessus. Nous pouvons utiliser Vuex pour gérer l'état de l'application afin que les données puissent être partagées dans toute l'application. Dans les composants Vue, nous pouvons utiliser les méthodes mapState et mapActions pour accéder aux données et méthodes stockées dans Vuex.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!