解决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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
json数据的列循环示例
Sep 06 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
微信小程序canvas实现签名功能
Jan 19 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
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python重试装饰器的简单实现方法
2019/01/31 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Python通过文本和图片生成词云图
2020/05/21 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
Python脚本调试工具安装过程
2021/01/11 Python
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
职工运动会感言
2014/02/07 职场文书
网络管理员岗位职责
2014/03/17 职场文书
出国签证在职证明
2014/09/20 职场文书
爱的承诺书
2015/01/20 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python