storejsで取得したデータをvueで処理する手順の詳細説明

今回は、Vueがstorejsのデータ取得を処理する手順について詳しく説明します。Vueがstorejsのデータ取得を処理するための注意事項は何ですか?実際のケースを見てみましょう。

具体的なコードは次のとおりです:

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

この時点で印刷してください:

this.shopList で表示される結果は {ob: Observer}

ただし、次のように vue で直接使用することもできます:

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

ただし、この時点で this.shopList 内のデータを処理したい場合、データを走査してループする場合、 this.shopList.length の印刷時に表示される結果が未定義であるため、予期しない影響が発生します。

オブジェクトをトラバースするにはいくつかの方法があります :

1. 最も一般的に使用される for ループ ですが、現時点では長さが定義されていないため、このメソッドは使用できません

。 2.上記と同じ理由でご利用頂けません

3. jquery にはオブジェクトをトラバースするメソッドもあります $.each(this.shopList,function(n,i){})

このデータを走査できる 3 番目のメソッドが見つかり、データを処理できるようになります。

しかし、this.shopList オブジェクトに別のオブジェクトのレイヤーが含まれている場合はどうなるでしょうか? .each() に .each() の別の層が含まれ、さらに .each() の別の層が含まれていれば、この問題は解決されるのではないでしょうか?この方法に加えて、より良い方法があります:

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

より簡単で直接的な方法は、まずデータを変数に割り当て、そのデータを必要な形式に処理してから、this.shopList にコピーすることです。

データを this.shopList に直接割り当てると、データを処理できないのはなぜですか?

その理由は、this.shopList にデータを割り当てると、vue データの双方向のバインドが実現されるためです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vuejs で v-show を使用すると機能しない理由は何ですか?

vue の計算プロパティの詳細な説明

以上がstorejsで取得したデータをvueで処理する手順の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。