vue脚手架 vuex模块化和四大辅助函数的结合使用
目录
01 四大辅助函数结合vuex模块化的使用
02 event-bus事件总线的使用
01 四大辅助函数结合vuex模块化的使用
mapState 在映射模块化带有命名空间的使用步骤:
方式一:(重要)
...mapState('模块名1',['该模块的变量1','该模块的变量2'....])
...mapState('模块名2',['该模块的变量1','该模块的变量2'....])
如果渲染了多个模块的变量到当前组件里面 必须写多个...mapState
方式二:(了解)
...mapState({
自定义变量名1:state=>state.模块名.该模块的变量1,
自定义变量名1:state=>state.模块名.该模块的变量2,
})
方式三(了解)：
...mapState('模块名1',{
自定义变量名1：state=>state.该模块的变量名1,
...
})
...mapState('模块2',{
自定义变量名1：state=>state.该模块的变量名1,
自定义变量名2：state=>state.该模块的变量名2,
...
})
mapGetters 在映射模块化带有命名空间的使用步骤:
方式一:(重要)
...mapGetters('模块名1',['该模块的变量1','该模块的变量2'....])
...mapGetters('模块名2',['该模块的变量1','该模块的变量2'....])
如果渲染了多个模块的变量到当前组件里面 必须写多个...mapGetters
方式二:(了解)
...mapGetters({
自定义变量名1:state=>state.模块名.该模块的变量1,
自定义变量名1:state=>state.模块名.该模块的变量2,
})
方式三(了解)：
...mapGetters('模块名1',{
自定义变量名1：state=>state.该模块的变量名1,
...
})
...mapGetters('模块2',{
自定义变量名1：state=>state.该模块的变量名1,
自定义变量名2：state=>state.该模块的变量名2,
...
})
mapMuattions结合命名空间进行映射：
方式一:(不常用)
...mapMutations(['模块名/方法名']) 调用时 this.['模块名/方法名'](传参)
方式二:(常用)
...mapMutations('模块名',['该模块下的方法名']) 调用时: this.该模块下的方法名(传参)
mapActions结合命名空间进行映射：
方式一:(不常用)
...mapActions(['模块名/方法名']) 调用时 this.['模块名/方法名'](传参)
方式二:(常用)
...mapActions('模块名',['该模块下的方法名']) 调用时: this.该模块下的方法名(传参)
02 event-bus事件总线的使用
vuex最大的弊端就是太笨重 只适合大型项目
如果小型项目想要进行传参: 可以父子组件传参 路由传参 地址栏拼接，
session/local/cookie进行传参 组先组件给后代传参(后期讲) event-bus(事件总线)。
event-bus事件总线：
原理就是: 事件的发布订阅模式
订阅就是关注 发布就是直播
vue对象.$on( ) 事件订阅(关注)
vue对象.$emit( ) 事件发布(直播)
需要找到一个空的vue对象 专门用来发布和订阅的
目前main.js里面创建的这个new Vue是vue对象 但是这个vue对象已经做了很多事情了,
所以需要找一个空的vue对象专门处理发布,订阅功能
订阅事件:(需要在事件发布之前)
vue对象.$on('要发布的事件名称','事件驱动函数')
驱动函数里面接收事件发布者传递的数据
发布事件:
vue对象.$emit('要发布的事件名称', 传参1,传参2...)