map辅助函数获取模块属性

通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。在在当前组件中引入Vuex通过Vuex来调用辅助函数

import { mapState, mapGetters, mapMutations,mapActions } from "vuex";
  ...mapState('modA',['modaStr']),
    ...mapState('modB',['modbStr']),

    /* 第二种 */
    // ...mapState({
    //   a:state=>state.modA.modaStr,
    //   b:state=>state.modB.modbStr
    // })

    /* 第三种 */
    // ...mapState("modA", {
    //   a: (state) => state.modaStr,
    // }),
    // ...mapState("modB", {
    //   b: (state) => state.modbStr,
    // }),

    /* 第一种 */
    // ...mapState('modA',['strGetter']),
    // ...mapState('modB',['strbGetter'])

    /* 第二种 */
    ...mapGetters("modA", {
      getterA: "strGetter",
    }),
    ...mapGetters("modB", {
      getterB: "strbGetter",
    }),
  },
  methods:{
    /* 第一种 */
    // ...mapMutations('modA',['CHANGESTR']),
    /* 第二种 */
    // ...mapMutations(["modA/CHANGESTR"]),
    /* 第三种 */
    ...mapMutations("modA", {
      fn1: "CHANGESTR",
    }),
    changeStr() {
      // this.$store.commit("modA/CHANGESTR", "哈哈哈哈哈");
      // this.CHANGESTR('好好学习，天天向上')
      // this['modA/CHANGESTR']('好好学习')
      this.fn1("好好学习");
    },

    /* 第一种 */
    // ...mapActions('modA',['waitStr']),
    /* 第二种 */
    // ...mapActions([
    //   'modA/waitStr'
    // ]),
    /* 第三种 */
    ...mapActions('modA',{
      w1:'waitStr'
    }),
    changeWait() {
      // this.$store.dispatch("modA/waitStr", "哈哈哈哈哈");
      // this.waitStr('好好学习')
      // this['modA/waitStr']('好好学习天天向上')
      this.w1('加油')
    },
  },
};

混入mixins

混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

在mixin.js中：

export default {
    data(){
        return {
            msg:'vue初始化已完成'
        }
    },
    created() {
        console.log(this.msg);
    },
    methods: {
        fn(){
            alert(this.msg)
        }
    },
}

在app页面中：
import mixin from "@/mixins/mixin";
 
 <h1 @click="fn">{{ msg }}</h1>
    <router-link to="/about">跳转about</router-link>
    <router-view></router-view>

export default {
  name: "APP",
   mixins: [mixin]
   }

引入swiper轮播图

第一步：安装依赖 npm i swiper@5 --save npm i vue-awesome-swiper@3 --save
第二步：全局安装在main.js里面操作：

import VueAwesomeSwiper from 'vue-awesome-swiper'

/* 在node_modules里面找到swiper文件夹里面的css文件 */
import 'swiper/css/swiper.css'

/* 使用Vue.use来注册一个轮播图插件 */
Vue.use(VueAwesomeSwiper)

第三步：在自己的组件文件夹中新建一个轮播图组件 MySwiper.vue：并复制以下代码到你的组件中

<template>
  <div id="app">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  }
};
</script>

<style>
.swiper-container {
  width: 500px;
  height: 400px;
  border: 1px solid red;
}
</style>

最后在App.vue中引入创建的组件即可

map辅助函数、混入mixins及swiper引用

map辅助函数获取模块属性

混入mixins

引入swiper轮播图