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 ...
随机推荐
- 基于乐鑫 ESP32-C3 的 Matter Light 实践
背景介绍 最近公司在研究 Matter 协议在智能家居领域的市场机会,考虑到易用性和文档支撑等方面,相比较 Telink,产品部门对乐鑫的 Matter-SDK 更感兴趣,因而开展了一些测试工作,毕竟 ...
- 在 KubeSphere 中开启新一代云原生数仓 Databend
作者:尚卓燃(https://github.com/PsiACE),Databend 研发工程师,Apache OpenDAL (Incubating) PPMC. 前言 Databend 是一款完全 ...
- 为什么样本方差是除以 n-1 而不是 n?
摘自https://www.zhihu.com/question/20099757/answer/13971886 https://www.zhihu.com/question/20099757/an ...
- Webpack热加载显示 'Cannot get /' 解决办法
安装webpack-dev-server后,用 npm 打包运行,打开后显示 'Cannot get /' : 需要在webpack.config.js的devServer中添加以下代码: 现在再次运 ...
- Paimon lookup store 实现
Lookup Store 主要用于 Paimon 中的 Lookup Compaction 以及 Lookup join 的场景. 会将远程的列存文件在本地转化为 KV 查找的格式. Hash htt ...
- C240731B
B 游戏类问题 先假设一瓶毒药都不用, 先把治疗的贡献加进答案里面,这样治疗.毒药.攻击的贡献分别是独立的. 如果 \(i\) 位置本来是治疗, 那么用毒药多扣的血是 \(a[i]=(p+r) \ti ...
- (Redis基础教程之十) 如何在Redis中运行事务
介绍 Redis是一个开源的内存中键值数据存储.Redis允许您计划一系列命令,然后一个接一个地运行它们,这一过程称为_transaction_.每个事务都被视为不间断且隔离的操作,以确保数据完整性. ...
- redis之性能优化
1 redis-cli命令的 --stat选项 关于stat选项,官网也是介绍的比较简单.使用redis-cli命令加上stat选项可以实时监视redis实例,比如当前节点内存中缓存的 key总数以及 ...
- Go操作数据库之MySQL
安装mysql驱动: go get -u github.com/go-sql-driver/mysql 初始化模块 go mod init m 执行 go mod tidy 导入包: package ...
- Blazor 组件库 BootstrapBlazor 中Row组件介绍
组件介绍 在Bootstrap中,我们经常使用row和col通过栅格化来控制显示位置. 如 <div class="row"> <div class=" ...