- 辅助函数获取模块属性
通过辅助函数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>
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)
★ 复制下面的代码在vscode中会出现word格式黄色空格，
需要自己删掉，建议手敲下面的代码
第三步：
在自己的组件文件夹中 新建一个轮播图组件 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文件中去：
