vuex模块辅助函数
创建modules文件下的modA.js文件， 模块的局部状态如下
const state=()=>({
modaStr:'我是模块A的数据'
})
const getters={
strGetter(state){
return state.modaStr+'getter'
}
}
const mutations={
CHANGESTRA(state,payload){
state.modaStr=payload
}
}
const actions={
waitStr({commit},data){
setTimeout(() => {
commit('CHANGESTRA',data)
}, 1500);
}
}
export default{
namespaced:true,
state,
getters,
mutations,
actions
}
computed:{
/* 最简单的使用数组的方式获取State属性 */
...mapState('modA',['modaStr']),
/* 和data数据名重复改名 */
/* 第一种 */
...mapState({
a:state=>state.modA.modaStr,
}),
/* 第二种 */
...mapState('modA',{a:state=>state.modaStr}),
\
/* 最简单的使用数组的方式获取Getters属性 */
...mapGetters('modA',['strGetter'])
/* 使用对象的方式获取Getters属性 */
...mapGetters('modA',{strA:'strGetter'})
},
methods:{
/* 使用数组的方式获取Mutations里面的方法 */
...mapMutations('modA',['CHANGESTRA']),
/* 另一种数组方式的写法 */
...mapMutations([
'modA/CHANGESTRA', //->this'modA/CHANGESTRA'
]),
/* 使用对象的方式获取Mutations方法 */
...mapMutations('modA',{
fn1:'CHANGESTRA'
}),
changemoda(){
/* this.$store.commit('modA/CHANGESTRA','后来的我们都到了18k') */
/* this.CHANGESTRA('后来的我们都到了18k') */
/* this'modA/CHANGESTRA' */
this.fn1('后来的我们都到了18k')
},
\
/* 使用数组的方式获取Actions里面的方法 */
...mapActions('modA',['waitStr']),
/* 数组的方式第二种写法 */
...mapActions([
'modA/waitStr'
]),
/* 使用对象的方式获取Actions方法 */
...mapActions('modA',{
fn2:'waitStr'
})
waitChange(){
/* this.$store.dispatch('modA/waitStr','异步处理完成') */
this.waitStr('异步处理完成')
this'modA/waitStr'
this.fn2('异步处理完成')
},
}
\
混入
局部混入
/* 把公共的内容放在mixinsA.js文件中 */
export default{
data(){
return{
msg:'vue初始化完毕'
}
},
created() {
console.log(this.msg);
},
methods: {
fn(){
alert(this.msg)
console.log('mixins ``');
}
},
APP页面导入局部
import mixinsA from '@/mixins/mixinsA'
export default {
name:'App',
/* 混入对象的钩子将在组件自身钩子之前调用 */
mixins:[mixinsA],
methods:{
/* 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先 */
fn(){
alert('app init')
}
}
}
全局混入，慎用
Vue.mixin({
created:function(){
console.log('全局init..');
}
})
/* 用了全局混入会执行4遍，因为加载的时候会执行一遍main.js里面全局混入的内容，有三个页面需要使用，三个vue页面分别执行一遍 */
\
制作Vue版本的轮播图
第一步：
安装依赖
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：
并复制以下代码到你的组件中：
\
.swiper-container { width: 500px; height: 400px; border: 1px solid red; }\
