vue项目使用Vuex获取数据实现Swiper

对于通过Vuex状态管理器获取Swiper需要使用的数据，先是需要在state.js中定义需要使用的状态，代码如下：

categories: []

在mutation-type.js中定义mutation的type名称常量，代码如下：

export const RECEIVE_CATEGORIES = 'receive_categories'

在mutation.js中定义直接更新state的方法对象，代码如下：

[RECEIVE_CATEGORIES] (state, {categories}) {
    state.categories = categories
}

在action.js中定义间接更新state的方法对象，代码如下：

async getCategories ({commit, state}) {
    const result = await reqFoodList()
    if (result.code === 0) {
      const categories = result.data
      commit(RECEIVE_CATEGORIES, {categories})
    }
 }

在vue的项目中使用swiper，需要先下载swiper，可以通过命令进行下载，命令如下：

npm install --save swiper

引入swiper，在需要使用swiper的页面，写上引入的css和js代码，代码如下：

import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

在页面当中去使用Vuex获取的数据，需要先去在mounted()中调用action，代码如下：

mounted() {
 this.$store.dispatch('getCategories')
}

读取state，先引入Vuex中的mapState，代码如下：

import { mapState } from 'vuex'

然后在computed()中通过mapState读取state，代码如下：

computed() {
...mapState([ 'categories'])
}

在页面当中就可以通过遍历Vuex中获取到的数据，进行遍历，代码如下：

<nav class="msite_nav" v-if="categories.length">
    <div class="swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(categories, index) of categoriesArr" :key="index">
            <a href="javascript:" class="link_to_food" v-for="(category, index) of categories" :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>

categoriesArr是根据categories一维数组生成一个二维数组，小数组的元素个数最大是8，可以通过计算属性获取，代码如下：

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

对于异步更新显示数据，我们可以通过watch监听显示数据，通过this.$nextTick() 这样的方式一旦完成数据更新完成界面更新，就会调用，在里面可以创建一个Swiper实例对象，loop是循环轮播，pagination是分页器，代码如下：

 watch: {
    categories (val) {
      this.$nextTick(() => {
        new Swiper('.swiper-container', {
          // 循环轮播
          loop: true,
          // 分页器
          pagination: {
            el: '.swiper-pagination'
          }
        })
      })
    }
 }

完整的代码如下：

<template>
    <div class="msite">
        <nav class="msite_nav" v-if="categories.length">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(categories, index) of categoriesArr" :key="index">
                    <a href="javascript:" class="link_to_food" v-for="(category, index) of categories" :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>
</template>

<script>
/* eslint-disable no-new */
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { mapState } from 'vuex'

export default {
  name: 'Msite',
  data () {
    return {
      baseImageUrl: 'https://acelemecdn.com'
    }
  },
  mounted () {
    this.$store.dispatch('getCategories')
  },
  watch: {
    categories (val) {
      this.$nextTick(() => {
        new Swiper('.swiper-container', {
          // 循环轮播
          loop: true,
          // 分页器
          pagination: {
            el: '.swiper-pagination'
          }
        })
      })
    }
  },
  computed: {
    ...mapState(['address', 'categories', 'userInfo']),
    categoriesArr () {
      const {categories} = this
      // 空的二维数组
      const arr = []
      // 空的小数组，最大长度为8，每页显示8个
      let minArr = []
      // 遍历 categories
      categories.forEach(c => {
        // 如果当前小数组已经满了，创建一个新的
        if (minArr.length === 8) {
          minArr = []
        }
        // 如果minArr是空的，将小数组保存到大数组中
        if (minArr.length === 0) {
          arr.push(minArr)
        }
        // 将当前的分类保存到小数组中去
        minArr.push(c)
      })
      return arr
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
</style>

旧城tk

发布了146 篇原创文章 · 获赞 34 · 访问量 3万+

私信关注

vue项目使用Vuex获取数据实现Swiper

猜你喜欢