vuex中使用对象展开运算符的示例


Posted in Javascript onSeptember 25, 2017

使用场景

当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了!

1.首先需要安装

npm install babel-plugin-transform-object-rest-spread -D

2.需要在.babelrc文件中新增以下

{

 "presets": [

  ["env", { "modules": false }]

 ],

 "plugins": ["transform-object-rest-spread"] //增加这一行

}

3.在vue组件中使用

<script>

  import {mapState,mapGetters} from 'vuex'

  export default {

    methods:{

      increment(){

        this.$store.commit('increment');

      }

    },

    computed:{

      ...mapGetters([

        'count'

      ]),

      ...mapState({

        counts(){

          return this.$store.state.count;

        }

      })

    }

  }

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习面向对象之面向对象的术语
Nov 30 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 #Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 #Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 #Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 #Javascript
简单谈谈js的数据类型
Sep 25 #Javascript
实现两个文本框同时输入的实例
Sep 25 #Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
You might like
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
vuex 中插件的编写案例解析
2019/06/10 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python频繁写入文件时提速的方法
2019/06/26 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
中文专业毕业生自荐信
2013/10/28 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
自我检讨报告
2015/01/28 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技