一：Vuex模块化map辅助函数

• 辅助函数的作用就是把vuex方法解构到组件中 可以直接this.方法名使用
• 引入：import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
• 使用这个解构出来的方法前面需要家你模块化组件的名字，如： ...mapState("modA", ["modaStr"]),

• mapState有三种解构方法，数组直接解构最简单 解构出来是属性 所以在computed中扩展

• mapGetters 两种解构方法

• mapMutations两种解构方法 解构出来是方法 所以在methds中扩展

• mapActions

二 混入mixin

• 先一个文件夹 里面有mindA.js mindB.js 文件里面的方法和数据都是公共使用的 打开页面自己会先执行一遍，哪个页面使用，再执行一遍，谁使用就会调用

• 组件使用这个混入 谁用谁引入这个文件里面方法

• 全局的混入，在main。js中写 同理 不过不推荐 会对组件造成影响

三 vuex引入轮播

• 第一步：安装依赖 npm i swiper@5 --save npm i vue-awesome-swiper@3 --save

• 第二部 全局main.js引入

    import VueAwesomeSwiper from "vue-awesome-swiper";
    import "swiper/css/swiper.css";
    Vue.use(VueAwesomeSwiper);
    
  

• 第三部：就在页面写轮播页面

介绍一下vue-awesome-swiper最靠谱的使用方法。

目前网上对于vue-awesome-swiper的使用方法各种坑，要么版本对不上，要么swiper.css引用地址不对，要么swiper-pagination不显示，要么自动轮播失效，反正各种坑让人火大。下面介绍一下自己亲测可用的正确使用方法。

首先版本，请使用3.1.3，别想着用什么4以上的或别的版本，目前就这个版本最稳定，不相信可以自己去测试，掉坑里可别怪没提醒！

第一步：安装

//直接安装版本3即可，自动会选择3.1.3版本
cnpm i vue-awesome-swiper@3 -S
//或者手动指定
cnpm i vue-awesome-swiper@3.1.3 -S

第二步：引入

页面引入即可，没必要全局引入，因为很少所以页面都要使用轮播的。全局引入只会增加额外的加载缓存和加载速度。全部贴出来自己衡量吧。

页面引入
请注意此处引入的swiper, swiperSlide的s是小写，搞错会报错。

**

<script>
//页面引入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
};
</script>

全局引入
main.js

**

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
//引入样式
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */)

第三步，页面调用示例 —— 完整代码

**

<template>
  <div class="app-container">
    <div class="swiper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide
          v-for="item in 5"
          :key="item"
          :style="{backgroundImage: 'url('+require('@/assets/img/swiper-img.png')+')'}">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
//导入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'default',
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',    //与slot="pagination"处 class 一致
          clickable: true,            //轮播按钮支持点击
        }
      }
    };
  },
  components: {
    swiper,
    swiperSlide
  },
};
</script>

<style lang="scss" scoped>
.app-container{
  .swiper{
    width: 100%;
    
    &>>>.swiper-container {
      width: 100%;

      .swiper-slide {
        width: 100%;
        height: 0;
        padding-bottom: 28.1%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-pagination{
        .swiper-pagination-bullet-active{
          background-color: #F29B76;
        }
      }
    }
  }
}
</style>

第四步：配置options。

查看github的vue-awesome-swiper的官方示例：
github.surmon.me/vue-awesome…\

最终实现效果