Comment appeler vuex pour stocker les données d'interface dans vue.js

Cet article vous présente principalement les informations pertinentes sur l'introduction des données de l'interface de stockage vuex et l'appel de vue.js. L'article les présente en détail à travers un exemple de code, qui a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. cela, veuillez suivre l'éditeur pour apprendre ensemble.

Avant-propos

Il y a quelques jours, j'ai vu le didacticiel vidéo de l'application Ele.me à haute imitation du professeur Huang Yi sur MOOC.com, et Je travaillais sur l'interface lors de la conception, je pensais, cette interface peut-elle être stockée et appelée globalement ? Au lieu de parcourir l'interface plusieurs fois, c'est également difficile à gérer.

La vue universelle a cette fonction, c'est vuex.

Vuex est une architecture de gestion de données de type Flux principalement utilisée dans les applications monopages de moyenne et grande taille. Cela nous aide principalement à mieux organiser le code et à maintenir l'état au sein de l'application dans un état maintenable et compréhensible.

Si vous ne comprenez pas très bien ce que signifie l'état dans une application Vue.js, vous pouvez imaginer le champ de données dans le composant Vue que vous avez écrit auparavant. Vuex divise l'état en état interne du composant et état au niveau de l'application :

• État interne du composant : état utilisé uniquement dans un composant (champ de données)

• Statut au niveau de l'application : statut partagé par plusieurs composants

Par exemple : Par exemple, il existe un composant parent qui a deux composants enfants. Ce composant parent peut utiliser des accessoires pour transmettre des données au composant enfant. Ce canal de données est facile à comprendre.

Le processus de mise en œuvre spécifique consiste bien sûr à d'abord installer

npm install vuex --save（推荐使用淘宝镜像cnpm，具体实施请自行百度）

puis à créer un fichier store.js pour gérer les données

Le contenu à l'intérieur est comme ceci

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state:{
 },
 actions:{
 },
 mutations:{
 }
})

Ensuite, introduisez ce fichier js dans main.js

import store from './store.js'

Puis commencez à demandez des données, écrivez

mutations:{
  getJson(){
   Vue.http.get('../data.json',{
    },{
    headers:{},
    emulateJSON:true
    }).then(response=>{
    this.state.newslist=response.data;
    },response=>{
     
    })
  }
 }

dans l'attribut mutations. Le but de l'écriture de ceci est de permettre aux actions d'ajuster puis de stocker les données dans l'état. Le site officiel dit qu'il s'agit d'un stockage de données asynchrone. c'est ce que je comprends. Asynchrone signifie la même chose que le chargement asynchrone d'ajax, et bien sûr, la synchronisation signifie des mutations. Mais les données asynchrones doivent d'abord être écrites dans des mutations, puis peuvent être appelées, vous devez donc les écrire dans des actions comme celle-ci

actions:{
  newJson(obj){
   obj.commit('getJson');
  }
 },

puis écrire l'état comme ceci

state:{
  newslist:[]
 },

Le but de la rédaction de ceci est de ne pas signaler d'erreur, d'éviter des erreurs telles que ne pas être trouvé.

Les newJson et obj ci-dessus sont personnalisés par moi. Vous pouvez les écrire comme vous le souhaitez. getJson est la méthode que vous souhaitez utiliser dans les mutations. Elle sera pratique pour le détournement plus tard. , mais les paramètres doivent être C'est l'état. Cet état est l'état ci-dessus, non personnalisé. Écrivez à mort.

Vous pourrez ensuite diviser le flux dans votre sous-composant !

Le code dans le sous-composant est comme ceci :

import {mapState} from 'vuex';
computed:{
 ...mapState({
  goods:state=>state.newslist.goods,
  classMap:state=>state.classMap
 })
 }

Ici, j'ai personnalisé un marchandise pour remplacer state.newslist.goods, car mes données sont dans le format de

{
"goods":[]
}

Je pensais que c'était trop long, alors je l'ai raccourci.

Ensuite, vous pouvez l'appeler directement en html. Voici un petit morceau de code

<ul>
 <li v-for="(item,index) in goods" class="menu-item" :class="{&#39;current&#39;:currentIndex===index}" @click="selectMenu(index,$event)">
 <span class="text border-1px">
 <span class="icon" v-show="item.type>0">
 </span>
 {{item.name}}
  </span>
  </li>
</ul>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. avenir.

Articles associés :

Comment empêcher le rendu répété à l'aide de React

Comment implémenter la fonction directive dans vue

Comment implémenter l'encapsulation basée sur le module mssql dans nodejs

Comment implémenter la liaison en Javascript

Comment implémenter il en js Lien secondaire

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!