Explication détaillée des étapes permettant à vue de traiter les données obtenues par storejs

Cette fois, je vais vous donner une explication détaillée des étapes permettant à Vue de traiter les données obtenues par storejs Quelles sont les précautions pour que Vue traite les données obtenues à partir de storejs. est 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)
    }
  }  
}

Imprimez-le à ce moment :

Les résultats affichés par this.shopList sont {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 veux traiter les données dans this.shopList à ce moment-là, des problèmes surgiront. Si vous souhaitez parcourir et boucler les données, des effets inattendus se produiront, car les résultats affichés par l'impression this.shopList.length apparaîtront à ce moment-là. est indéfini.

Il existe plusieurs façons de parcourir un objet  :

1. La boucle for la plus couramment utilisée, mais pour le moment, la longueur n'est pas définie et cette méthode n'est pas disponible

 ; 2. ne peut pas être utilisé pour la même raison que ci-dessus

3. jquery a également des méthodes pour parcourir les objets $.each(this.shopList,function(n,i){})

Vous trouverez une troisième méthode qui peut parcourir ces données, puis les données pourront ê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 façon :

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)
    }
  }

Un moyen plus simple et plus direct consiste d'abord à attribuer les données à une variable, à traiter les données dans le format souhaité, puis à les copier dans this.shopList.

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

La raison en est que lorsque vous attribuez des données à this.shopList, vous réalisez une liaison bidirectionnelle des données 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 :

Quelles sont les raisons pour lesquelles l'utilisation de v-show dans vuejs ne fonctionne pas

propriétés calculées de vue Explication détaillée

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!