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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex中使用对象展开运算符的示例

    使用场景 当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了! 1.首先需要安装 npm install babel-plugin-transform-object-rest-spread -D 2.需要在.babelrc文件中新增以下 { "presets": [ ["env", { "modules": false }] ], "plugins&

  • iOS中使用对象的弱引用示例代码

    iOS中使用对象的弱引用示例代码

    简介 我们都知道使用 UIImage imageNamed 创建的 UIImage 对象会被持有(强引用),如果图片太大会占用内存,损耗 APP 的性能,影响用户体验,如果能改造对其的强引用变为弱引用就可以解决问题. 我们可能会有类似上面的场景,有些对象暂时保存起来,可能后面会用到,也有可能不会使用,但是又不想去管理它们的生命周期,如果它们能够自己被销毁就很省事,不需要去关心这些对象到底耗费了多少内存. 今天跟大家聊聊如何在 iOS 开发中保持对对象的弱引用而不是强引用,希望看完之后,能帮助到大

  • 在Python中使用成员运算符的示例

    在Python中使用成员运算符的示例

    下表列出了所有Python语言支持的成员运算符. 例如: 试试下面的例子就明白了所有的Python编程语言提供会员运算符: #!/usr/bin/python a = 10 b = 20 list = [1, 2, 3, 4, 5 ]; if ( a in list ): print "Line 1 - a is available in the given list" else: print "Line 1 - a is not available in the given

  • JavaScript中展开运算符及应用的实例代码

    展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用. let obj1 = { value1: 1, value2: 2 }; let obj2 = {...obj1 }; console.log(obj2); // {value1: 1, value2: 2} 上面的用法实际相当于 obj2 = {value1: 1, value2: 2} 展开运算符的写法与obj2

  • vuex中getters的基本用法解读

    目录 getters的基本用法解读 一.getter 定义 二.使用方法 三.mapGetters辅助函数 四.getters注意事项 getters的两种调用方法 方法一 方法二 getters的基本用法解读 一.getter 定义 Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作. 就像vue生命周期中的computed一样,getter的返回值 会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算 二.使用方法 1.通

  • JavaScript展开运算符和剩余运算符的区别详解

    目录 什么是剩余运算符? 剩余运算符在JavaScript函数中是如何工作的? 注意!不能在包含剩余参数的函数体中使用"use strict" 剩余运算符在参数解构中是如何工作的? JavaScript arguments和剩余参数之间有哪些区别? 什么是展开运算符以及它在JavaScript中是如何工作的? 有关展开运算符我们需要知道的 1. 展开运算符不能展开对象字面量的值 2. 展开运算符不克隆相同的属性 3. 注意展开运算符在包含非原语的对象中是何如工作的 如果myName数组

  • PHP中的运算符使用示例详细指南

    目录 正文 逻辑运算符对布尔值起作用 not运算符: 2个单数运算符 正文 一旦你有了一些变量,你就可以对它们进行运算: $base = 20; $height = 10; $area = $base * $height; 我用来将base与height相乘的* ,就是乘法运算. 我们有相当多的运算符,让我们对主要的运算符做一个简单的总结. 首先,这里是算术运算符.+,-,*,/ (除法),% (余数)和** (指数). 我们有赋值运算符= ,我们已经用它来给一个变量赋值了. 接下来我们有比较运

  • Vuex中的Mutations的具体使用方法

    在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离. Mutations使用 Vuex 中的 mutations 非常类似于事件,每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似.先注册事件,当触发响

  • vuex中...mapstate和...mapgetters的区别及说明

    目录 ...mapstate和...mapgetters的区别 …mapstate …mapGetters vuex mapState mapGetters用法及多个module下用法 一.mapState 二.mapGetters 三.mapActions.mapMutations ...mapstate和...mapgetters的区别 …mapstate 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮

  • vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.jb51.net/article/138229.htm,是一个简单的应用:这是一些简单的vue的小组件方法: http://www.jb51.net/article/138230.htm) 何为四大金刚? 1.State (这里可以是 小写的 state,跟官网保持一致,采用大写,因为个人习惯,后面的代码介绍采用小写) vuex的状态管理,需要依赖

随机推荐