vuex辅助函数的运用
js内容
const state = {
strA:"我是modA的值"
}
const getters = {
strges(state){
return state.strA+'getters'
}
}
const mutations = {
GETXG(state,paylode){
state.strA = paylode
}
}
const actions = {
changeFn({commit},data){
setTimeout(() => {
commit('GETXG',data)
}, 1000);
}
}
export default {
namespaced:true,
state,
getters,
mutations,
actions
}
APP.vue内容
<div>
<h1>{{strA}}</h1>
<h1>{{strges}}</h1>
<button @click="xg">修改</button>
<button @click="ybxg">异步修改</button>
</div>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">轮播图</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
import misin from '@/misin/misin.js'
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
export default {
misin:[misin],
computed:{
...mapState('modB',['strA']),
...mapGetters('modB',['strges'])
},
methods:{
...mapMutations('modB',['GETXG']),
...mapActions('modB',['changeFn']),
xg(){
this.GETXG('你是大聪明')
},
ybxg(){
this.changeFn('鬼灭之刃')
}
}
}
混入
局部混入
新创建一个文件夹misin，在里面创建js文件，这里面的内容是共享的
export default {
data(){
return{
msg:"我是msg的值"
}
},
created() {
console.log(this.msg);
},
methods: {
fn(){
alert(this.msg)
}
},
全局混入不建议使用
Vue.mixin({
created:function(){
console.log('全局init。。。。');
}
})
轮播图
首先安装依赖
npm i swiper@5 --save
npm i vue-awesome-swiper@3 --save
在mian.js里面
import VueAwesomeSwiper from 'vue-awesome-swiper'
/* 在node_modules里面找到swiper文件夹里面的css文件 */
import 'swiper/css/swiper.css'
/* 使用Vue.use来注册一个轮播图插件 */
Vue.use(VueAwesomeSwiper)
在app.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>
