【Vueの基本】Shangpinhui Project-07-三段連系データの動的表示

TypeNav はグローバル コンポーネントなので、「src/pages/Home」の「TypeNav」フォルダを「src/components」フォルダに移動します。

 main.js の TypeNav のパスを変更する

 コードのテスト リクエスト部分を削除します

 コンポーネントがマウントされると、サーバーにリクエストを送信し、データを取得して表示できます。「src/componentns/TypeNav/index.vue」に、次のコードを追加します。

その中で、categoryList はアクションです

 データ ウェアハウス「src/store/home/index.js」でアクションを見つけて編集します。コードは次のとおりです。

 その中で、インポートされたインターフェース名は「src/api/index.js」で定義されています。

 出力された応答データは次のようになっていることがわかります。

 リクエストが成功したら、引き続きレスポンス データ (result.data) をミューテーションに送信します。

 データ ウェアハウス内のデータを、サーバーから返されたデータに変更します。

 この時点で、ウェアハウス内のサーバーから返されたデータが既にあることがわかります。

 次に、表示するコンポーネントのウェアハウス内のデータを取得する必要があります。「src/components/TypeNav/index.vue」を開き、次のコードを追加します。

 この時点で、応答データがページに表示されます。

 次に、対応する位置にデータを表示し、次の市外局番を削除する必要があります。

 次のコードに変更します。

 

おすすめ

転載: blog.csdn.net/ChaoChao66666/article/details/130486072