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 ...
随机推荐
- 「模拟赛」多校 A 层联训 8
\(22pts\),本来可以切掉前两个题的?! A. 传送 (teleport) 签到 12 pts,错的很唐!我把 Dij 用的 dis 数组直接赋值成了点到 1 号点之间的 x 距离和 y 距离的 ...
- mysql主从复制详细部署
1.异步复制:这是MySQL默认的复制模式.在这种模式下,主库在执行完客户端提交的事务后会立即将结果返回给客户端,并不关心从库是否已经接收并处理.这种模式的优点是实现简单,但缺点是如果主库崩溃,已经提 ...
- 工作中的技术总结_ form表单的前后台交互 _20210825
工作中的技术总结_ form表单的前后台交互 _20210825 在项目经常会使用 form 表单 进行数据的 页面展示 以及数据的 提交和后台处理 1.数据是怎么从后台传递到前台的 model.ad ...
- ArgoWorkflow教程(八)---基于 LifecycleHook 实现流水线通知提醒
本篇介绍一下 ArgoWorkflow 中的 ExitHandler 和 LifecycleHook 功能,可以根据流水线每一步的不同状态,执行不同操作,一般用于发送通知. 1. 概述 本篇介绍一下 ...
- 每日学学Java开发规范,OOP规约(附阿里巴巴Java开发手册(终极版))
前言 每次去不同的公司,码不同的代码,适应不同的规范,经常被老大教育规范问题,我都有点走火入魔的感觉,还是要去看看阿里巴巴Java开发规范,从中熟悉一下,纠正自己,码出高效,码出质量. 想细看的可以去 ...
- 4.6 Linux解压.gz格式的文件(gunzip命令)
gunzip 是一个使用广泛的解压缩命令,它用于解压被 gzip 压缩过的文件(扩展名为 .gz). 对于解压被 gzip 压缩过的文件,还可以使用 gzip 自己,即 gzip -d 压缩包. gu ...
- Python计算1到100偶数的加和
sum_value = 0 for i in range(1,101): if i % 2 == 1: continue sum_value += i print(sum_value) print(s ...
- 算法笔记——马拉核弹(Mana Nuclear)
0x00 摘要 "马拉核弹"算法由 SXHT 同学(2009~今)发明,并在 2024 年 11 月于某不知名学校机房内正式公布.该算法基于 1975 年发明的 Manacher ...
- oracle查询是否锁表以及解锁语句
--锁表语句 SELECT b.owner, b.object_name, a.session_id, a.locked_mode FROM v$locked_object a, dba_object ...
- 条理清晰,浅显易懂:Lua语法基础知识(第二部分)
今天我们继续学习Lua语法基础教程,中篇. 五.变量 5.1 number变量 变量,可以看作是一个桶,在里面装你想要装的内容.这些内容可以是Lua包含的所有合法类型. 例如:我想要新建一个桶,名叫b ...