解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题


Posted in Javascript onAugust 03, 2018

前言

最近博主正在用微信小程序开发一款网上商城系统。恰好赶上了美团开源的小程序开发框架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不可用问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
JavaScript实现新年倒计时效果
Nov 17 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
mpvue跳转页面及注意事项
Aug 03 #Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 #Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 #Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 #Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 #Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 #Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 #Javascript
You might like
10 个经典PHP函数
2013/10/17 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
javascript 闭包
2011/09/15 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
js实现日期级联效果
2014/01/23 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
python正则表达式中的括号匹配问题
2014/12/14 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
销售人才自我评价范文
2014/09/27 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS