【Vuex】mapGetters 辅助函数
mapGetters
辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
import { mapGetters } from 'vuex' export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
如果你想将一个 getter 属性另取一个名字,使用对象形式:
mapGetters({
// 映射 `this.doneCount` 为 `store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
扩展:ES6展开运算符
定义:
.展开运算符允许一个表达式在某处展开。
使用场景
1.展开函数在多个参数的地方使用 。意指用于函数传参
2.多个元素的地方使用,意指用于数组字面量
3.多个边框的地方使用,意指用于解构赋值
注意事项
展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。
iterables的实现是依靠[Symbol.iterator]函数,而目前只有Array,Set,String内置[Symbol.iterator]方法,而Object尚未内置该方法,因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。
函数调用中使用展开运算符
之前实现方式
function test(a, b, c) {
return a + b +c;
}
var args = [0, 1, 2];
test.apply(null, args);//3
如上,我们把args数组当作实参传递给了a,b,c,这边正是利用了Function.prototype.apply的特性。
ES6实现方式
function test(a, b, c) {
return a + b + c;
}
var args = [0, 1, 2];
test(...args);//
使用...展开运算符就可以把args直接传递给test()函数。
数组字面量中使用展开运算符
例如:两个数组合并为一个数组
var arr1=['a','b','c'];
var arr2=[...arr1,'d','e']; //['a','b','c','d','e']
用在push函数中,可以不用apply()函数合并2个数组
var arr1=['a','b','c'];
var arr2=['d','e'];
arr1.push(...arr2); //['a','b','c','d','e']
用于解构赋值
解构赋值也是ES6中的一个特性,而这个展开运算符可以用于部分情景:
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,将多个数组项组合成了一个新数组。
let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //
arg2 //
arg3 //['3','4']
ps:
let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //报错
即:解构赋值中展开运算符只能用在最后:
类数组对象变成数组
展开运算符可以将一个类数组对象变成一个真正的数组对象:
var obj = document.getElementById("box").getElementsByTagName("li");
Array.isArray(obj);//false
var arr=[...obj]; Array.isArray(arr); //true
相关资料:https://vuex.vuejs.org/zh-cn/getters.html
https://www.cnblogs.com/mingjiezhang/p/5903026.html
http://es6.ruanyifeng.com/#docs/destructuring
作者:smile.轉角
QQ:493177502
【Vuex】mapGetters 辅助函数的更多相关文章
- 扩展运算符及其在vuex的辅助函数里的应用详解
一.扩展运算符 <1>为什么扩展运算符会诞生? 因为箭头函数没有arguments,所以才有了扩展运算符 <2>在箭头函数里 ...
- vuex 源码:深入 vuex 之辅助函数 mapState
前言 当一个组件要获取多个 state 的时候,声明计算属性就会变得重复和冗余了.我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性. 所以我们得清楚,mapState 的作用就是帮 ...
- vuex中辅助函数的使用方法
mapState import { mapState } from 'vuex' export default { // ... computed:{ ...mapState({ // 箭头函数可使代 ...
- 理解Vuex的辅助函数mapState, mapActions, mapMutations用法
在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的 ...
- Vuex mapGetters,mapActions
一.基本用法 1. 初始化并创建一个项目 ? 1 2 3 vue init webpack-simple vuex-demo cd vuex-demo npm install 2. 安装 vuex ? ...
- vuex mapGetters
1.vuex 配置 //vuex的配置 //注意Store是大写 const store = new Vuex.Store({ //数据保存 state: { show: false, count: ...
- [转]理解Vuex的辅助函数mapState, mapActions, mapMutations用法
原文地址:https://www.cnblogs.com/tugenhua0707/p/9794423.html 在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 ...
- 解决 vuex mapGetters 语法报错 (Unexpected token )
在使用vuex2的mapGetters 和 mapActions 的方法时,借助 stage2 的 Object Rest Operator 特性,可以写出下面代码: computed: { ... ...
- Vuex之辅助函数
mapState.mapGetters.mapActions 如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funNa ...
随机推荐
- express 对数据库数据增删改查
接着 http://www.cnblogs.com/cynthia-wuqian/p/6560548.html (1)概念 Schema(属性) :一种以文件形式存储的数 据库模型骨架,不具备数据库的 ...
- thinkphp 使用paginate分页搜索带参数
最近做项目发现使用paginate分页,搜索的时候点下一页搜索条件就变没了,所以在网上找了找一些方法,有的说是使用Page类,但是用习惯了paginate,再用Page不习惯,找到了一个方法,可以使用 ...
- BZOJ2028: [SHOI2009]会场预约(set)
Time Limit: 20 Sec Memory Limit: 64 MBSubmit: 425 Solved: 213[Submit][Status][Discuss] Description ...
- JAVA代码根据经纬度范围计算WGS84与谷歌全球墨卡托包含的切片数目与拼接图像像素尺寸
根据项目需求编写的代码. 适用场景:在网络地图上,比如天地图与谷歌地图,用户用鼠标在地图上拉一个矩形框,希望下载该矩形框内某一层级的瓦片数据,并将所有瓦片拼接成一个完整的,包含地理坐标的tif图像. ...
- JS 调试中常见的报错的解决办法
报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) ...
- JAVA设计模式——代理(静态代理)
定义 为其它的对象提供一种代理,以控制这个对象的访问 使用场景 当不想直接访问某个对象的时候,就可以通过代理 1.不想买午餐,同事帮忙带 2.买车不用去厂里,去4s店 3.去代理点买火车票,不用去车站 ...
- L2-024. 部落
在一个社区里,每个人都有自己的小圈子,还可能同时属于很多不同的朋友圈.我们认为朋友的朋友都算在一个部落里,于是要请你统计一下,在一个给定社区中,到底有多少个互不相交的部落?并且检查任意两个人是否属于同 ...
- Nosql数据库分类
一.KV存储 包括:Redis,Memcached 特点:使用key快速查到其value,Memcached支持string类型的value,Redis除string类型外还支持set,hash,so ...
- Scala抽象类型
package big.data.analyse.scala import scala.io.{BufferedSource, Source} /** * 抽象类型 * Created by zhen ...
- Java读取.properties配置文件
一.介绍 Properties文件在Java中主要为配置文件,文件类型为:.properties,格式为文本文件,内容格式为"键=值" 二.读取 这里我采用的是getResourc ...