# 1-3.Vue外送平台App-異步顯示數據(商家列表)
### 1. 想辦法先發請求獲取數據

Msite.vue
 mounted() {
        //devTool確認有沒有得到資料
        this.$store.dispatch("getShops");
    },


ShopList.vue templete

<template>
<div class="shop_container">
    <ul class="shop_list">
        <li class="shop_li border-1px" v-for="(shop,index) in shops" :key="index">
            <a>
                <div class="shop_left">
                    <img class="shop_img" :src=" BaseImgUrl+shop.image_path">
                </div>
                <div class="shop_right">
                    <section class="shop_detail_header">
                        <h4 class="shop_title ellipsis">{{shop.name}}</h4>
                        <ul class="shop_detail_ul">
                            <li class="supports" v-for="(support, index) in shop.supports" :key="index">
                                {{support.icon_name}}
                            </li>
                        </ul>
                    </section>
                    <section class="shop_rating_order">
                        <section class="shop_rating_order_left">
                            <div class="star star-24">
                                <span class="star-item on"></span>
                                <span class="star-item on"></span>
                                <span class="star-item on"></span>
                                <span class="star-item half"></span>
                                <span class="star-item off"></span>
                            </div>
                            <div class="rating_section">
                                {{shops.rating}}
                            </div>
                            <div class="order_section">
                                月售{{shop.recent_order_num}}單
                            </div>
                        </section>
                        <section class="shop_rating_order_right">
                            <span class="delivery_style delivery_right"></span>
                        </section>
                    </section>
                    <section class="shop_distance">
                        <p class="shop_delivery_msg">
                            <span>¥20起送</span>
                            <span class="segmentation">/</span>
                            <span>配送费约¥5</span>
                        </p>
                    </section>
                </div>
            </a>
        </li>
    </ul>
</div>
</template>

### 2 .讀數據顯示

<script>
import { mapState} from "Vuex";

export default {
    data() {
        return {
            BaseImgUrl: 'http://cangdu.org:8083/img/'
        }
    },
    computed: {
        ...mapState(['shops'])
    }
}
</script>

### svg圖
* 為麼需要svg圖?
因為像電商網站數據多，所以需要先放個類似loading圖緩衝
1. 運用v-if v-else
2. v-if="categorys.length > 0 (如果categorys資料大於零就顯示此數據 ) 不然(v-else)就顯示圖片 (<img src="./images/msite_back.svg" v-else>)
Miste.vue

 <nav class="msite_nav" v-if="categorys.length > 0">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(caetgorys, index) in categorysArr" :key="index">
                    <a href="javascript:" class="link_to_food" v-for="(category ,index) in caetgorys" :key="index">
                        <div class="food_container">
                            <img :src="BaseImgUrl + category.image_url" />
                        </div>
                        <span>{{ category.title }}</span>
                    </a>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </nav>
    <img src="./images/msite_back.svg" v-else>

ShopList.vue
1.這個svg圖示只有單一個圖片，shoplist中的li有好幾個，所以
必須使用v-for

<ul class="shop_list" v-if="shops.length > 0">
        <li class="shop_li border-1px" v-for="(shop,index) in shops" :key="index">
            <a>
                <div class="shop_left">
                    <img class="shop_img" :src=" 'BaseImgUrl +shop.image_path'">
                </div>
                <div class="shop_right">
                    <section class="shop_detail_header">
                        <h4 class="shop_title ellipsis">{{shop.name}}</h4>
                        <ul class="shop_detail_ul">
                            <li class="supports" v-for="(support, index) in shop.supports" :key="index">
                                {{support.icon_name}}
                            </li>
                        </ul>
                    </section>
                    <section class="shop_rating_order">
                        <section class="shop_rating_order_left">
                            <div class="star star-24">
                                <span class="star-item on"></span>
                                <span class="star-item on"></span>
                                <span class="star-item on"></span>
                                <span class="star-item half"></span>
                                <span class="star-item off"></span>
                            </div>
                            <div class="rating_section">
                                {{shops.rating}}
                            </div>
                            <div class="order_section">
                                月售{{shop.recent_order_num}}單
                            </div>
                        </section>
                        <section class="shop_rating_order_right">
                            <span class="delivery_style delivery_right"></span>
                        </section>
                    </section>
                    <section class="shop_distance">
                        <p class="shop_delivery_msg">
                            <span>¥20起送</span>
                            <span class="segmentation">/</span>
                            <span>配送费约¥5</span>
                        </p>
                    </section>
                </div>
            </a>
        </li>
    </ul>
    <ul v-else>
        <li v-for="item in 10" :key="item">
            <img src="./images/shop_back.svg">
        </li>
    </ul>