解决mpvue + vuex 开发微信小程序,vuex辅助函数mapState、mapGetters不可用问题
2018-03-29 13:08
1081 查看
前言
最近博主正在用微信小程序开发一款网上商城系统。恰好赶上了美团开源的小程序开发框架mpvue。该框架继承了vue.js的特性,用起来还是蛮爽的。然后在开发中,数据仓库这块懵逼了, 引入的vuex的辅助函数mapState、mapGetters、mapMutations、mapActions等怎么就不能用呢。苦恼之际打开D盘,一番愉悦之后,终于想通啦…问题分析
vuex辅助函数首先简单说一下vuex的辅助函数mapState、mapGetters、mapMutations、mapActions,我们在子组件经常用到很多状态量,为了避免过分的使用
this.$store.state.xxx、
this.$store.dispatch导致的冗余问题,我们用辅助函数来使代码变得简洁易读。注意了,它就相当于语法糖似的,实际上还会映射为
this.$store.吧啦吧啦
vue-cli + vuex项目
在一般的
vue-cli + vuex项目中,主函数
main.js中会将 store 对象提供给 “store” 选项,这样可以把 store 对象的实例注入所有的子组件中,从而在子组件中可以用
this.$store.state.xxx、
this.$store.dispatch等来访问或操纵数据仓库中的数据
new Vue({ el: '#app', store, router, template: '<App/>', components: { App } })
mpvue + vuex项目
注意了,在
mpvue + vuex项目中,很遗憾不能通过上面那种方式来将store对象实例注入到每个子组件中(至少我尝试N种配置不行),也就是说,在子组件中不能使用
this.$store.吧啦吧啦,从而导致辅助函数不能正确使用。这个时候我们就需要换个思路去实现,要在每个子组件中能够访问
this.$store才行。
解决办法
这里呢,博主使用的方法很简单,既然我们需要在子组件中用this.$store访问store实例,那我们直接在vue的原型上添加$store属性指向store对象不就行啦,抱着试一试的心态写了下面这行代码。
Vue.prototype.$store = store
这样一来我们在子组件中便可以用
this.$store访问对象。确实也解决了辅助函数不能使用的问题。
来自某切图仔的低沉怒吼
原本是准备吐槽设计师的,结果被每个某个平胸小萝莉给吐槽了一顿审美,没啥别的,祝她永远年轻态相关文章推荐
- 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
- 使用Vue.js开发微信小程序开源框架mpvue解析
- 基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用
- 使用Vue.js开发微信小程序:开源框架mpvue解析
- 用Vue.js开发微信小程序:开源框架mpvue解析
- 可以用vue开发小程序了!美团开源前端框架 mpvue
- 微信小程序在开发中遇到的问题与解决方法
- 基于mpvue开发微信小程序(项目已开源)
- 微信小程序开发遇到的问题以及解决
- 微信小程序开发过程中tabbar页面显示的相关问题及解决办法
- 微信小程序开发过程中tabbar页面显示的相关问题及解决办法
- 可以用vue开发小程序了!美团开源前端框架 mpvue
- 使用mpvue框架开发微信小程序
- Windows下用Eclipse开发Hadoop程序遇到的问题及解决方法
- VS为XP开发的程序移植到Win7上遇到两个小的问题及解决办法
- Tomcat6.0+Eclipse+Lomboz开发j2ee程序,解决jstl添加问题
- VS为XP开发的程序移植到Win7上遇到两个小的问题及解决办法
- IOS开发问题解决之Xcode运行程序时attaching to挂起不动
- 解决C/C++中的multiple definition of问题 - c++语言程序开发技术文章_c++编程 - 红黑联盟