vue traite les données obtenues par storejs

Cette fois, je vais vous apporter les données obtenues par vue traitement storejs. Quelles sont les précautions pour vue traitement storejs pour obtenir des données Voici un cas pratique, jetons un coup d'œil.

Le code spécifique est le suivant :

export default {
  data(){
    return {
      shopList:{},
      isEmpty:false, //判断购物车中是否有存在内容
    }
  },
  created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //对数据处理 将商店中名中的地址分离出来
      this.shopList = store.get('shopCar');
      console.log(this.shopList)
    }
  }  
}

A ce moment, imprimez-le :

this.shopList Le résultat affiché est {ob: Observer}

Bien qu'il puisse être utilisé directement dans vue comme suit :

<ul>
  <li v-for = "list in shopList" :key = "list.id">
    {{list}}
  </li>
</ul>

Mais si je souhaite traiter les données de this.shopList à ce moment-là, des problèmes surgiront à ce moment-là, si vous le souhaitez. pour parcourir et boucler les données, vous Un effet inattendu se produit, car le résultat affiché lors de l'impression this.shopList.length n'est pas défini.

Il existe plusieurs façons de parcourir des objets  :

1, la boucle for , mais la longueur n'est pas définie pour le moment, cette méthode n'est pas disponible

2, car in ne peut pas être utilisé pour les mêmes raisons que ci-dessus

3. 🎜> dispose également de méthodes pour parcourir des objets$.each(this.shopList,function(n,i){})Vous trouverez une troisième méthode qui peut parcourir ces données, puis les données peuvent être traitées.

Mais que se passe-t-il si votre objet this.shopList contient une autre couche d'objets ? Si .each() contient une autre couche de .each() et contient une autre couche de .each(), ce problème ne serait-il pas résolu ? En plus de cette méthode, il existe une meilleure méthode :

Une méthode plus simple et plus directe consiste d'abord à attribuer les données à une variable, à traiter les données dans le format souhaité, puis à les copier. Donnez simplement this.shopList.

created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //对数据处理 将商店中名中的地址分离出来
      var shopList = store.get('shopCar')
      $.each(shopList,function(n,i){
        //处理数据。。。。。
      })
      this.shopList = shopList;
      console.log(this.shopList)
    }
  }

Pourquoi ne pouvons-nous pas traiter les données si nous les attribuons directement à this.shopList ?

La raison est que lorsque vous attribuez des données à this.shopList, vous réalisez une liaison bidirectionnelle des données de vue.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le composant Echarts d'actualisation dynamique dans Vue

Explication détaillée des étapes d'utilisation de 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!