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 相关文章推荐
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
使用pandas读取文件的实现
2019/07/31 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
提升python处理速度原理及方法实例
2019/12/25 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
《天游峰的扫路人》教学反思
2014/04/25 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
个人作风建设总结
2014/10/23 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android