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 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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 str_pad 函数使用详解
2009/01/13 PHP
php适配器模式介绍
2012/08/14 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
财务管理职业生涯规划范文
2013/12/27 职场文书
项目开发计划书
2014/01/09 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
岗位职责说明书
2014/05/07 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
小学生表扬稿范文
2015/05/05 职场文书
交心谈心活动总结
2015/05/11 职场文书
公司出差管理制度范本
2015/08/05 职场文书
教师远程培训心得体会
2016/01/09 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL