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

小鱼儿 2023-07-01 14:56 1阅读 0赞

1.  对于通过`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})
        }
     }

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

npm install --save swiper

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

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

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

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

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

import {  mapState } from 'vuex'

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

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

1.  在页面当中就可以通过遍历`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>
            
            <div class="swiper-pagination"></div>
        </div>
    </nav>

1.  `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
        }
    }

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

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

1.  完整的代码如下：

<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>
                    
                    <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>