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 ...
随机推荐
- 关系图谱后端不给指向性字段使用children
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...
- KubeSphere 社区双周报| 2024.08.02-08.15
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...
- 云原生爱好者周刊:炫酷的 Grafana 监控面板集合
开源项目推荐 grafana-dashboards-kubernetes 这个项目提供了一系列比较炫酷的用于监控 Kubernetes 的 Grafana 监控面板,灵感来源于 kubernetes- ...
- 等保测评FAQ
之前写过一篇关于等保测评的相关介绍<一起聊聊等保测评>,发现大家对于等保测评这个还是很关注的,有些人问等保测评这份工工作的,也有些人问关于等保测评一些指导意见的,这篇文章我想把大家的问题来 ...
- vue之JavaScript封装
导入js文件有很多种方式,我喜欢使用这种,感觉跟框架导入很相似.没有多余的沉湎. 定义一个js文件,比如util.js import Vue from "vue"; //===== ...
- [python]多线程快速入门
前言 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.由于CPython的GIL限制,多线程实际为单线程,大多只用来处理IO密集型任务. Python一般用标准库 ...
- 遇到慢查询怎么办?一文解读MySQL 8.0查询分析工具
本文分享自华为云社区<[华为云MySQL技术专栏]MySQL 8.0 EXPLAIN ANALYZE 工具介绍>,作者:GaussDB 数据库. 1. EXPLAIN ANALYZE可以解 ...
- 遗传算法+强化学习—TPG—Emergent Tangled Graph Representations for Atari Game Playing Agents
最近在看进化算法在强化学习(RL)领域的一些应用,有些论文中将使用进化算法解决强化学习问题的算法归为非强化学习算法,然而又有些论文把使用进化算法解决强化学习问题的算法归为强化学习算法,不过更多的论文是 ...
- 2个月搞定计算机二级C语言——真题(12)解析
1. 前言 本篇我们讲解2个月搞定计算机二级C语言--真题12 2. 程序填空题 2.1 题目要求 2.2 提供的代码 #include <stdio.h> #define N 3 int ...
- 分享一个纯Python开发的系统程序,基于VSCode + WxPython开发的跨平台应用系统
本项目是基于 wxPython 开发的 GUI 应用,主要用于管理基础框架内容,包括用户.角色.机构.权限.日志.菜单.字典.附件.通用编码规则.配置管理等基础框架内容. 愿景是构建一个基于Pytho ...