视图层-Home-pdd项目通过Vuex状态管理请求首页轮播图和导航数据

请求首页轮播和导航数据

在index.js中写入请求数据方法

在项目目录下的src文件夹下的api文件夹下的index.js服务端入口文件写入请求数据方法

src\api\index.js

index.js

//引入 ajax 模块
import ajax from './ajax'

//1；设置基础路径
const BASE_URL = 'http://127.0.0.1:3000';

//2：请求方法
//2.1：请求首页的轮播图
export const getHomeCasual = ()=> ajax(BASE_URL + '/api/homecasual');

//2.2：请求首页的导航
export const getHomeNav = ()=> ajax(BASE_URL + '/api/homenav');

在Vuex状态管理文件夹store下配置

state.js

state.js (Vuex中的基本数据所在的文件 )

//Vuex中的基本数据所在的文件

export default {
  //首页轮播图
  homecasual: [],
  //首页导航
  homenav: []
}

actions.js

actions.js (Vuex中通过commit方法异步 触发指定的mutations中的方法)

// vuex 中用于异步 commit 的发送

//1：从服务端index.js文件中引入请求数据的方法
import {
getHomeCasual,
getHomeNav
} from '../api'

//2：从统一常量文件夹mutation-types.js文件中引入常量
import {
HOME_CASUAL,
HOME_NAV
} from './mutation-types'


export default {
    //3：获取首页轮播图
    async reqHomeCasual({commit}){
        //4：提取服务端的请求数据并赋值给一个新的数组，也就是api文件夹下的index.js中的getHomeCasual函数所获取到的数据
        const result = await getHomeCasual();
        //5：commit 异步 触发指定的mutations中的方法
        commit(HOME_CASUAL, {homecasual : result.message.data});
    },

    //获取首页导航
    async reqHomeNav({commit}){
        //提取服务端的请求数据并赋值给一个新的数组，也就是api文件夹下的index.js中的getHomeNav函数所获取到的数据
        const result = await getHomeNav();
        //commit 异步 触发指定的mutations中的方法
        commit(HOME_NAV, {homenav : result.message.data});
    }
}

mutation-type.js

mutation-types.js (统一常量所在文件夹)

//统一常量

export const HOME_CASUAL = 'home_casual'; //首页轮播图
export const HOME_NAV = 'home_nav';//首页导航

mutations.js

mutations.js (Vuex的store的状态管理的所有方法所在的文件 )

//store的状态管理的所有方法所在的文件

import {
  HOME_CASUAL,
  HOME_NAV
} from './mutation-types'

export default {
  //首页轮播图
  [HOME_CASUAL](state,{homecasual}){
    //将服务器请求过来的 homecasual 赋值给state中自定义的数组 homecasual
    state.homecasual = homecasual;
  },
  //首页导航
  [HOME_NAV](state,{homenav}){
    //将服务器请求过来的 homenav 赋值给state中自定义的数组 homenav
    state.homenav = homenav;
  }
}

---

在轮播图所在组件文件请求数据

在项目文件夹下的src文件夹下的pages文件夹下的Home首页文件夹下的Hot文件夹中的HotLb.vue中请求轮播图数据

src\pages\Home\Hot\HotLb.vue （轮播图组件所在文件）

HotLb.vue

HotLb.vue (轮播图组件所在文件)

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper" v-if="homecasual.length > 0">
       <!--遍历从请求到的数组--> 
      <div class="swiper-slide" v-for="(casual,index) in homecasual" :key="index" >
        <img :src="casual.imgurl" alt="" width="100%">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
//引入swiper第三方库
import Swiper, { Navigation, Pagination,Autoplay } from 'swiper';
Swiper.use([Navigation, Pagination,Autoplay]);
import 'swiper/swiper-bundle.css'

//1：引入vuex中从服务器端发送过来的数据，也就是state.js中的数据
import {
  mapState
} from 'vuex'

export default {
  name: "HotLb",
  mounted () {
    //2：请求轮播图数据
    this.$store.dispatch("reqHomeCasual");
  },
  computed: {
      //3：获取轮播的数据
      ...mapState(['homecasual'])
  }，
  watch: {
    //4：监听homecasual数据，一旦发生改变就实例化一个Swiper渲染页面实现轮播效果
    homecasual() {
      //$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
      this.$nextTick(()=> {
        //Swiper第三方组件库轮播图样式方法
        new Swiper ('.swiper-container', {
          loop: true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el:'.swiper-pagination',
          },
          autoplay:true,
          // autoplay: {
          //   delay: 3000,
          //   stopOnLastSlide: false,
          //   disableOnInteraction: true,
          // },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      })
    }
  }
 
}
</script>

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

</style>

---

在首页导航所在组件请求导航数据

在项目文件夹下的src文件夹下的pages文件夹下的Home首页文件夹下的Hot文件夹中的HotLb.vue中请求轮播图数据

src\pages\Home\Hot\HotNav.vue （导航组件所在文件）

HotNav.vue

HotNav.vue （导航组件所在文件）

<template>
  <div class="hot-nav">
    <!--滚动区域-->
    <div class="hot-nav-content" v-if="homenav.length > 0">
      <div class="nav-content-inner">
          <!--遍历请求到的数组-->
        <a class="inner-item" v-for="(nav,index) in homenav" :key="index">
          <img :src="nav.iconurl"  alt="" >
          <span>{{nav.icontitle}}</span>
        </a>
      </div>
    </div>
    <!--滚动条区域-->
    <div class="hot-nav-bottom">
      <div class="hot-nav-bottom-inner" :style="innerBarStyle">

      </div>
    </div>
  </div>
</template>

<script>
//引入vuex中从服务器端发送过来的数据，也就是state.js中的数据
import {mapState} from 'vuex'

export default {
      name: "HotNav",
      data(){
           return {
              
           }
       },
       //生命周期函数，组件创建后调用
       mounted() {
           //1：请求首页导航数据
           this.$store.dispatch('reqHomeNav');  
       },
    //计算属性
       computed: {
           //2：获取首页导航数据
           ...mapState(["homenav"]),
       },
       methods: {
           
       }
  }
  </script>
  
   <style scoped lang="stylus" rel="stylesheet/stylus">
   
   
   </style>
   

项目源码地址

https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd