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 ...
随机推荐
- NS2网络模拟(7)-homework03.tcl
1: #NS2_有线部分\homework03.tcl 2: 3: #Create a simulator object 4: set ns [new Simulator] 5: 6: #Define ...
- Rust 2017 调查报告:学习曲线是最大痛点(最大的问题是这门语言太偏底层了,现在做底层的少了。还有C这个绕不过去的存在)
Rust 官方在社区上做了一次调查,以了解用户如何看待 Rust 的发展.调查共收到 5368 份回复,其中有 大约 2/3 的是 Rust 用户,剩下的 1/3 是非 Rust 用户,调查结果如下. ...
- SharePoint创建内容类型
SharePoint创建内容类型 内容类型的用途是多种多样的.创建内容类型也非常简单. 1. 点击网站操作--网站设置. 2. 点击网站内容类型,点击创建. 3. 命名Beginning_ShareP ...
- Converter
public class ImgPathConvert : IValueConverter { public object Convert(object value, Type targetType, ...
- Bootstrap 屏幕类型
/* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */ /* 小屏幕(平板 ...
- 关于"云服务器被检测到对外攻击已阻断该服务器对其它服务器端口的访问"的解决措施
前段时间阿里云大量发送云服务器对外攻击的信息到邮箱中,邮件信息大概如下: 您的云服务器(XX.XX.XX.XX)由于被检测到对外攻击,已阻断该服务器对其它服务器端口(TCP:XX)的访问,阻断预计将在 ...
- git/github初级运用自如 (good)
三 . 设置用户信息 这一步不是很重要,貌似不设置也行,但github官方步骤中有,所以这里也提一下. 在git中设置用户名,邮箱 $ git config --global user.name &q ...
- System.Data.SQLite 中GUID的处理
原文:System.Data.SQLite 中GUID的处理 项目中正好用到System.Data.SQLite,在手持上使用这个数据库,因为要做数据同步,所以表中的主键都是Guid的数据类型. 在数 ...
- Index of /android/repository
放这里了,总是记不住... https://mirrors.zzu.edu.cn/android/repository/
- 命令行程序如何获取HINSTANCE?
main() { HINSTANCE hinst = GetModuleHandle(NULL); }