辅助函数的简单运用
先调用
import {mapMutations,mapActions,mapState,mapGetters} from 'vuex'
使用：
computed:{
// ...mapState('modA',['modAStr']),
// ...mapState('modB',['modBStr'])
// ...mapState({
// a:state=>state.modA.modAStr,
// b:state=>state.modB.modBStr
// })
...mapState({
a:state=>state.modA.modAStr,
}),
...mapState({
b:state=>state.modB.modBStr,
}),
// ...mapGetters('modA',['strGetters']),
// ...mapGetters('modB',['strGetters2']),
...mapGetters('modA',{
getaStr:'strGetters'
}),
...mapGetters('modB',{
getbStr:'strGetters2'
}),
},
created(){
this.list = this.$store.state.list
},
components:{
CompA,
CompB
},
methods:{
// changeFn(){
// if(this.shuzi==0){
// this.list = this.$store.state.list
// }
// if(this.shuzi==1){
// this.list = this.$store.getters.getDaZhuan
// }
// if(this.shuzi==2){
// this.list = this.$store.getters.getBenke
// }
// },
// ...mapMutations('modA',['CHANGESTR']),
// ...mapMutations([
// 'modA/CHANGESTR'
// ]),
...mapMutations('modA',{
fn1:'CHANGESTR'
}),
changeFn(){
// this.CHANGESTR('11111')
// this['modA/CHANGESTR']('11111')
this.fn1('1111111')
},
// ...mapActions('modA',['waitfnStr']),
// ...mapActions([
// 'modA/waitfnStr'
// ]),
...mapActions('modA',{
waitFn1:'waitfnStr'
}),
changeFn2(){
// this.waitfnStr('111111')
// this['modA/waitFn1']('11111')
this.waitFn1('11111')
},
},
混入
全局混入（不建议）：
// Vue.mixin({
// created:function(){
// console.log('全局混入')
// }
// }),
要混入的js：
export default {
data() {
return {
msg:'vue已加载完毕'
}
},
created() {
console.log('11111')
},
methods: {
fn1(){
alert('11111')
}
},
}
局部调用与使用
<template>
<div id="app">
<nav>
<h1 @click="fn1">{{msg}}</h1>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
import mixinsA from '@/mixins/mixinsA.js'
export default {
name:'App',
mixins:[mixinsA]
}
</script>
<style>
</style>
轮播图
先安装依赖
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)
再创建轮播图组件：
<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>
然后就可以在想使用的页面调用该组件
