vuex中使用对象展开运算符
使用场景
当需要进行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>
vuex中使用对象展开运算符的更多相关文章
- ES6中的展开运算符和解构对象
let obj = { a:1 b:2 } let obj2 = { ...obj c:3 d:4 } console.log(obj2)//1,2,3,4,对象展开 //常考题目 let a = 1 ...
- ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用
展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...
- vuex中mapState、mapMutations、mapAction的理解
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性. // 在单独构建的版本中辅助函数为 Vue ...
- vuex中辅助函数的使用方法
mapState import { mapState } from 'vuex' export default { // ... computed:{ ...mapState({ // 箭头函数可使代 ...
- ECMAScript 6学习笔记(一):展开运算符
同步发布于:https://mingjiezhang.github.io/(转载请说明此出处). JavaScript是ECMAScript的实现和扩展,ES6标准的制定也为JavaScript加入了 ...
- ES6展开运算符(...)
数组字面量中使用展开运算符 我们可以这样合并数组: var arr1=['a','b','c']; var arr2=[...arr1,'d','e']; //['a','b','c','d','e' ...
- ES6展开运算符数组合并,函数传参
定义: .展开运算符允许一个表达式在某处展开. 使用场景 1.展开函数在多个参数的地方使用 .意指用于函数传参 2.多个元素的地方使用,意指用于数组字面量 3.多个边框的地方使用,意指用于解构赋值 函 ...
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- [转] ES6展开运算符
语法 用于函数调用 myFunction(...iterableObj); 用于数组字面量 [...iterableObj, 4, 5, 6] 函数传参 目前为止,我们都是使用Function.pro ...
随机推荐
- WPF使用MediaElement显示gif图片
原文:WPF使用MediaElement显示gif图片 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/SANYUNI/article/details ...
- 介绍MFC参与设计模式框架(一个)
最近我读了一些相关MFC参与设计的花纹纸架,为了帮助您了解MFC在此框架总结,我们希望对大家有帮助. 简介设计模式 设计模式是一套被重复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计 ...
- matlab 稀疏矩阵(sparse matrix)
参数的设置:spparms() spparms('spumoni', 3);:Set sparse monitor flag to obtain diagnostic output 1. 创建稀疏矩阵 ...
- Qt翻译---Thread Support in Qt
Thread Support in Qt QT提供线程支持在平台独立的线程类.一个安全线程的传递事件的方式,一个信号槽的链接在线程之中.这使得开发多线程容易.多线程程序也是一个有用的范例为不冻结用户界 ...
- 【iOS发展-49】的插件-插件该文档的凝视VVDocumenter安装与使用
文件凝视是/** */.快捷键///. 但是,这需要安装插件.VVDocumenter. 下载链接:https://github.com/onevcat/VVDocumenter-Xcode (1 ...
- Rancher 2.2.2 - HA 部署高可用k8s集群
对于生产环境,需以高可用的配置安装 Rancher,确保用户始终可以访问 Rancher Server.当安装在Kubernetes集群中时,Rancher将与集群的 etcd 集成,并利用Kuber ...
- multi-node和generic-pool两大利器
1.multi-node node只能单进程,单cpu工作,而multi-node则可以让node在多进程下共享内存的工作,实现机制是依靠child_process的sendmsg做到的.想要了解具体 ...
- VS生成Cordova for Android应用之Gradle
原文:VS生成Cordova for Android应用之Gradle 一.Gradle简介 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具.它使用一种基 ...
- Android零基础入门第13节:Android Studio配置优化,打造开发利器
原文:Android零基础入门第13节:Android Studio配置优化,打造开发利器 是不是很多同学已经有烦恼出现了?电脑配置已经很高了,但是每次运行Android程序的时候就很卡,而且每次安装 ...
- 用JavaScriptSerializer解析JSON
引用System.Web.Extensions using System.Web.Script.Serialization; var serializer = new JavaScriptSerial ...