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 相关文章推荐
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
js中日期的加减法
May 06 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
js运动事件函数详解
2016/10/21 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
工商管理系学生的自我评价分享
2013/11/29 职场文书
档案检查欢迎词
2014/01/13 职场文书
租房协议书怎么写
2014/04/10 职场文书
2014年教研工作总结
2014/12/06 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
MySQL sql模式设置引起的问题
2022/05/15 MySQL