Vue外卖项目的学习（3）

理解加深一下vuex相关使用

 mounted(){
      this.getAddress()
    },
 methods:{
      ...mapActions(['getAddress'])//相当于有了方法名
    },

实现异步加载图片与轮播

这里的二维数组很有意思以及this.$nextTick
首先因为swiper结构的原因，我们是要遍历两次的，第一次是几页，第二次是一页多少个，所以都是数组，结构像这样[[{},{}…],[{},{}…]…]
二维数组的思路：首先两个空数组，一个大数组，一个小数组，目标把小数组放入大数组中，然后往里面加东西，forEach循环遍历出每个{}，一页是8个，首先进入到第二个if，小数组为空时，把小数组放入到大数组中关联起来，然后向小数组中加数据对象，数据对象到8个了，就创建一个新的小数组，这里是新数组了啊，和上一个minArr不是一个东西，引用变了，然后向大数组后面再加个空数组，这不就是第二页么

this.$nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新
数据改变跟状态显示是两步，先去更新状态数据，后面异步更新界面，这里单纯的watch是早了，有了数据，要等界面加载完再执行轮播

const categorys = this.categorys
        //准备一个空的二维数组
        const arr = []
        //准备一个小数组最大长度为8
        let minArr = []
        //遍历categorys
        categorys.forEach(c => {
          //如果当前小数组已经满了，创建一个新的
          if (minArr.length === 8){
            minArr = []
          }
          //如果minArr是空的，将小数组保存到大数组中
          if (minArr.length === 0){
            arr.push(minArr)
          }
          //将当前分类保存到小数组中
          minArr.push(c)

        })
        return arr

<template>
  <section class="msite">
    <!--首页头部-->
    <HeaderTop :title='address.name'>
      <span class="header_search" slot="left">
        <i class="iconfont icon-sousuo"></i>
      </span>
      <span class="header_login" slot="right">
        <span class="header_login_text">登录|注册</span>
      </span>
    </HeaderTop>
    <!--首页导航-->
    <nav class="msite_nav">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(categorys, index) in categorysArr" :key="index">
            <a href="javascript:" class="link_to_food" v-for="(category, index) in categorys" :key="index">
              <div class="food_container">
                <img :src="baseImageUrl+category.image_url">
              </div>
              <span>{{category.title}}</span>
            </a>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </nav>
    <!--首页附近商家-->
    <div class="msite_shop_list">
      <div class="shop_header">
        <i class="iconfont icon-xuanxiang"></i>
        <span class="shop_header_title">附近商家</span>
      </div>
      <ShopList/>
    </div>
  </section>
</template>

<script>
  import {mapState} from 'vuex'
  import Swiper from 'swiper'
  import 'swiper/css/swiper.min.css'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import ShopList from '../../components/ShopList/ShopList'
  export default {
    data () {
      return {
        baseImageUrl: 'https://fuss10.elemecdn.com'
      }
    },
    mounted(){
      this.$store.dispatch('getCategorys')
      //创建一个Swiper实例对象，来实现轮播

    },
    computed:{
      ...mapState(['address', 'categorys']),
      //根据categorys一维数组生成一个二维数组
      //小数组中元素个数最大是8个
      categorysArr(){
        const categorys = this.categorys
        //准备一个空的二维数组
        const arr = []
        //准备一个小数组最大长度为8
        let minArr = []
        //遍历categorys
        categorys.forEach(c => {
          //如果当前小数组已经满了，创建一个新的
          if (minArr.length === 8){
            minArr = []
          }
          //如果minArr是空的，将小数组保存到大数组中
          if (minArr.length === 0){
            arr.push(minArr)
          }
          //将当前分类保存到小数组中
          minArr.push(c)

        })
        return arr
      }
    },
    watch:{
      categorys(value){//categorys数组中有数据了,在异步更新界面之前
        //界面更新就立即创建Swiper对象
        this.$nextTick(() => {//一旦完成界面更新，立即调用（此条语句要写在数据更新以后）
          new Swiper('.swiper-container', {
            loop:true, //可以循环轮播
            pagination:{
              el:'.swiper-pagination',
              //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
              clickable :true
            },
            autoplay: {
              delay: 3000,//3秒切换一次
            },
          })
        })
      }
    },
    components:{
      HeaderTop,
      ShopList
    }
  }
</script>