- 对于通过
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>