使用场景

当需要进行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中使用对象展开运算符的更多相关文章

  1. ES6中的展开运算符和解构对象

    let obj = { a:1 b:2 } let obj2 = { ...obj c:3 d:4 } console.log(obj2)//1,2,3,4,对象展开 //常考题目 let a = 1 ...

  2. ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用

    展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...

  3. vuex中mapState、mapMutations、mapAction的理解

    当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性. // 在单独构建的版本中辅助函数为 Vue ...

  4. vuex中辅助函数的使用方法

    mapState import { mapState } from 'vuex' export default { // ... computed:{ ...mapState({ // 箭头函数可使代 ...

  5. ECMAScript 6学习笔记(一):展开运算符

    同步发布于:https://mingjiezhang.github.io/(转载请说明此出处). JavaScript是ECMAScript的实现和扩展,ES6标准的制定也为JavaScript加入了 ...

  6. ES6展开运算符(...)

    数组字面量中使用展开运算符 我们可以这样合并数组: var arr1=['a','b','c']; var arr2=[...arr1,'d','e']; //['a','b','c','d','e' ...

  7. ES6展开运算符数组合并,函数传参

    定义: .展开运算符允许一个表达式在某处展开. 使用场景 1.展开函数在多个参数的地方使用 .意指用于函数传参 2.多个元素的地方使用,意指用于数组字面量 3.多个边框的地方使用,意指用于解构赋值 函 ...

  8. [js高手之路] es6系列教程 - 不定参数与展开运算符(...)

    三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...

  9. [转] ES6展开运算符

    语法 用于函数调用 myFunction(...iterableObj); 用于数组字面量 [...iterableObj, 4, 5, 6] 函数传参 目前为止,我们都是使用Function.pro ...

随机推荐

  1. 张量(tensor)的理解

    1. 从标量到矢量:携带更丰富的信息 矢,是箭的意思,突出的特点是其指向性. 袋子里有几个球? 3 个,magnitude(幅度,没有单位): 从这到你家多远?3 km(denominate),3 称 ...

  2. WPF后台动画DoubleAnimation讲解

    WPF后台动画,使用DoubleAnimation做的. 1.移动动画 需要参数(目标点离最上边的位置,目标点离最左边的位置,元素名称) Image mImage = new Image(); Flo ...

  3. ‘3 sigma’rule(68–95–99.7 rule)

    不限标准正太分布,任一正太分布(normal distribution)均可. 围绕均值附近求得的区间概率: (μ−k⋅σ,μ+k⋅σ) Pr(μ−σ≤x≤μ+σ)≈0.6827Pr(μ−2σ≤x≤μ ...

  4. Mac安装jupyter(原ipython)方法

    用了Mac之后非常不习惯,很多东西都要查才能完成=-=之前Python用的sublime和ide,今天看教程安利了一个jupyter 记录下用Mac安装jupyter的过程: 1.像其他安装Mac自带 ...

  5. 让你的sublime text写C代码 (sublime text 2 配置构建C开发环境)

    原则 1. 首先你要配置能够编译C++/C环境 2. window中配置该执行环境的环境变量,能够全局使用 3. sublime Text创建新的构建机制.并设置用改全局编译环境 具体过程 能够编译C ...

  6. style文件的指定

    新建资源文件   写资源文件 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/prese ...

  7. Delphi中的线程类 - TThread详解

    Delphi中的线程类 - TThread详解 2011年06月27日 星期一 20:28 Delphi中有一个线程类TThread是用来实现多线程编程的,这个绝大多数Delphi书藉都有说到,但基本 ...

  8. Window Features 总览

    This overview discusses features of windows such as window types, states, size, and position. Window ...

  9. Debian下编译安装驱动模块

    在Linux下,我们常有需要自己来编译安装驱动模块的情况,例如要安装显卡驱动,要安装无线驱动,有的时候某个程序的安装使用与需要安装相应的驱动模块.Debian Linux下的生活本已十分简单,使用ap ...

  10. 【Git】生成Patch和使用Patch

    1.生成Patch(俗称快照) 先来看看repo manifest 的用法 <1>cd /工作目录/项目目录/.repo/manifests <2>repo manifest ...