# 1-3.Vue外送平台App-異步顯示數據(食品分類輪播列表)
### 分析:
* 灰線:一維數組，最大值8
* 紅線:二維數組
(但剛開始只有一維數組，現在要如何創建二維數組呢?)

1.剛開始獲得的在computed

1.剛開始獲得的在computed:{
//categorys:這是一維數組(目前是空數組)
    ...mapState(["address"]),
}

2. 創建二維數組

    computed: {
        //devTool確認有沒有得到資料
        //categorys:這是一維數組(目前是空數組)
        ...mapState(["categorys"]),
        
        //categorys 封裝到新創建的二維數組
        categorysArr() {
            //先取一維數組的categorys
            const {
                categorys
            } = this;
            //創建一個空的二維數組
            const arr = [];
            //準備一個小數組(最大長度為8)
            let maxArr = [];
            //把小的推進空的
            categorys.forEach((c) => {
                // 當小數組已經滿了，在創建一個新的空的
                if (maxArr.length === 8) {
                    maxArr = [];
                }
                //如果小數組為0，那麼將小數組推進空數組裡面
                if (maxArr.length === 0) {
                    arr.push(maxArr);
                }
                //當前分類放進小數組裡面
                maxArr.push(c);
            });

            return arr;
        },
    },

### 輪播列表訊息

>Miste.vue:當前要顯示的templete

<nav class="msite_nav">
        <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>

### 根據一維數組變化成二維數組
分析圖

### 解決輪播bug
完成綁定方法後，遇到輪播無法輪播bug
Msite原先代碼


>這功能代碼因該在顯示資料以後才做動作
>開始先顯示categorys資料

如何解決呢?
* 使用監視(watch)方法監視categorys列表

方法一:可以實現效果，但不是太好的。因為方法是你自己設定的時間，假設你設定1秒，但原先只需要0.5秒

方法二:
1. 哪個回調函數能知道數據已經變了，可以馬上變化?
[Vue Component中有一個$nextTick 方法可以實現](https://vuejs.org/v2/api/#Vue-nextTick)

必須在computed(因先獲取categorys數據)後加入監聽效果

    computed: {
        //devTool確認有沒有得到資料
        //categorys:這是一維數組(目前是空數組)
        ...mapState(["address", "categorys"]),
        //categorys 封裝到新創建的二維數組
        categorysArr() {
            //先取一維數組的categorys
            const {
                categorys
            } = this;
            //創建一個空的二維數組
            const arr = [];
            //準備一個小數組(最大長度為8)
            let maxArr = [];
            //把小的推進空的
            categorys.forEach((c) => {
                // 當小數組已經滿了，在創建一個新的空的
                if (maxArr.length === 8) {
                    maxArr = [];
                }
                //如果小數組為0，那麼將小數組推進空數組裡面
                if (maxArr.length === 0) {
                    arr.push(maxArr);
                }
                //當前分類放進小數組裡面
                maxArr.push(c);
            });

            return arr;
        },
    },
    watch: {
        //介面更新後立即創建Swiper對象
        categorys(value) {
            this.$nextTick(() => { //一旦介面完成後立即更新(此語句必須寫在數據更新之後)
                //創建一個Swiper對象
                new Swiper('.swiper-container', {
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                })
            })
        },
    },