Vuex模块化map辅助函数,混入,轮播插件

297 阅读1分钟

一:Vuex模块化map辅助函数

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

image.png

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

image.png image.png

  • mapGetters 两种解构方法

image.png

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

image.png

  • mapActions

image.png

image.png

image.png

二 混入mixin

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

image.png

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

image.png image.png

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

image.png

三 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);
      
    复制代码
    
  • 第三部:就在页面写轮播页面

image.png

image.png

image.png

image.png

image.png