vue辅助函数mapState和mapGetter前面三个点到底是什么意思:对象展开运算符

import store from "./store"
computed: {
useName: function() {
return store.state.userName
}
}
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
....mapState({
useName: state => state.useName
}),
还可以按照如下方式使用mapState辅助函数:
在index.js文件中:
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters' Vue.use(Vuex) const state = {
userInfo: { phone: 111 }, //用户信息
orderList: [{ orderno: '1111' }], //订单列表
orderDetail: null, //订单产品详情
login: false, //是否登录
} export default new Vuex.Store({
state,
getters,
actions,
mutations,
})
在需要使用store中的各个状态变量的自定义的vue组件中:
computed: {
...mapState([
'orderList',
'login'
]),
},
mounted(){
console.log(typeof orderList); ==>undefind
console.log(typeof this.orderList)==>object
}
mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要,这个映射直接映射到当前Vue的this对象上。
所以通过this都能将这些对象点出来,同理,mapActions, mapMutations都是一样的道理。牢记~~~
参考链接:mapState使用
vue辅助函数mapState和mapGetter前面三个点到底是什么意思:对象展开运算符的更多相关文章
- vue的vuex在使用...mapState 和...mapGetter报错的解决方案
from:https://blog.csdn.net/ysterling/article/details/88145765 采用mapState 和mapGetter,在页面使用时报错,这是因为bab ...
- vuex 源码:深入 vuex 之辅助函数 mapState
前言 当一个组件要获取多个 state 的时候,声明计算属性就会变得重复和冗余了.我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性. 所以我们得清楚,mapState 的作用就是帮 ...
- vue辅助函数mapStates与mapGetters
状态管理器 <!-- store.js: --> import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export de ...
- [转] Vuex入门(2)—— state,mapState,...mapState对象展开符详解
1.state state是什么? 定义:state(vuex) ≍ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 ...
- DDD 领域驱动设计-三个问题思考实体和值对象(续)
上一篇:DDD 领域驱动设计-三个问题思考实体和值对象 说实话,整理现在这一篇博文的想法,在上一篇发布出来的时候就有了,但到现在才动起笔来,而且写之前又反复读了上一篇博文的内容及评论,然后去收集资料, ...
- JavaScript -- 时光流逝(三):js中的 String 对象的方法
JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...
- Python3从零开始爬取今日头条的新闻【三、滚动到底自动加载】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- 理解Vuex的辅助函数mapState, mapActions, mapMutations用法
在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的 ...
- [转]理解Vuex的辅助函数mapState, mapActions, mapMutations用法
原文地址:https://www.cnblogs.com/tugenhua0707/p/9794423.html 在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 ...
- Vue 爬坑之路(三)—— 使用 vue-router 跳转页面
使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...
随机推荐
- 云原生爱好者周刊:Cilium 放大招,发布服务网格 Beta 版
云原生一周动态要闻: Cilium 推出服务网格测试计划 Knative 已申请成为 CNCF 的孵化项目 Kubernetes v1.23 即将发布 Lens 5.3 发布 开源项目推荐 文章推荐 ...
- 云原生周刊 | 人类、机器人与 Kubernetes
近日 Grafana 官网发表了一篇博客介绍了 2022 年比较有意思.脑洞大开的一些 Grafana 使用案例,比如监控特斯拉 Model 3 的充电状态.OTA 更新状况等等. 海事技术供应商 R ...
- AWS-最佳实践-杂信息
1.Amazon Aurora Serverless v1 AmazonAurora-Serverless版本1是亚马逊Aurora的按需自动缩放配置.Aurora Serverlessv1 DB集群 ...
- 谈一谈 Netty 的内存管理 —— 且看 Netty 如何实现 Java 版的 Jemalloc
本文基于 Netty 4.1.112.Final 版本进行讨论 在之前的Netty 系列中,笔者是以 4.1.56.Final 版本为基础和大家讨论的,那么从本文开始,笔者将用最新版本 4.1.112 ...
- 4.4 Linux解压.zip格式的文件(unzip命令)
unzip 命令可以查看和解压缩 zip 文件.该命令的基本格式如下: [root@localhost ~]# unzip [选项] 压缩包名 此命令常用的选项以及各自的含义如表 1 所示. 选项 含 ...
- 【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
随着人工智能技术的不断发展,阿里体育等IT大厂,推出的"乐动力"."天天跳绳"AI运动APP,让云上运动会.线上运动会.健身打卡.AI体育指导等概念空前火热.那 ...
- app&小程序&web安全—sign签名绕过
零.前言 在web界面登陆时,小程序和app传输数据时经常会碰到签名,会对请求的参数进行签名,如果自己修改了数据包就会校验失败非常麻烦. 本文编写的契机就是因为碰到了一个JeecgBoot的小程序, ...
- Windows 使用 Intel(R) Arc(TM) GPU 推理ONNX 模型
这不刚换了一个笔记本电脑,Thinkpad T14P,带有Intel ARC GPU,今天我们来尝试用这个GPU来推理ONNX模型. 环境安装 查阅了相关文档,最好使用py310环境,其他版本可能存在 ...
- 文件上传漏洞&靶场通关详解
文件上传漏洞&靶场通关详解 什么是文件上传漏洞? 大部分网站都拥有上传文件的部分,文件上传漏洞是由于网站开发者对用户上传文件的过滤不够严格,攻击者可以通过这些漏洞上传可执行文件(如木马,恶意脚 ...
- 整合Sleuth
Sleuth是 springcloud 分布式跟踪解决方案. Sleuth 术语: 跨度(span ) :Sleuth 的基本工作单元,他用一个64位的id唯一标识.出ID外,span还包含 其他的数 ...