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 ...
随机推荐
- KubeSphere 核心架构浅析
作者简介:万宏明,KubeSphere 核心贡献者,专注于云原生安全领域. KubeSphere 是在 Kubernetes 之上构建的面向云原生应用的容器混合云管理系统.支持多云与多集群管理,提供全 ...
- Iterator和Iterable
Java遍历List有三种方式 public static void main(String[] args) { List<String> list = new ArrayList< ...
- docker容器开启ssh服务
http://www.dtmao.cc/news_show_703007.shtml Step1 利用CentOS基础镜像,创建一个docker容器,主要这里要指定端口映射,必须要映射到容器内的22端 ...
- 2024 CSP 游记
\(\text{CSP-J}\) 游记 \(\text{Day -INF}\) 初赛免了,没有游记. \(\text{Day 0}\) 有点慌,于是打开了游戏跟 \(\text{zjx,sym}\) ...
- 阿里云免费SSL证书申请全过程(图文详解)
下面我们来详细说下阿里云的域名是如何注册购买,解析绑定的. 首先,打开阿里云官网 万网早就被阿里云收购了,所以是同一家.输入你想购买的域名,我这里是随便输入了"aliyun.com&quo ...
- 【问题解决】java.lang.SecurityException: JCE cannot authenticate the provider BC
问题复现 历史项目升级JDK(由1.7升级到8),进行加密/解密时出现报错java.lang.SecurityException: JCE cannot authenticate the provid ...
- 5.3 Linux Vim三种工作模式
通过前面的学习我们知道,Linux 系统中所有的内容都以文件的形式进行存储,当在命令行下更改文件内容时,常会用到文本编辑器. 我们首选的文本编辑器是 Vim(至于为什么,可查看<Vi和Vim之间 ...
- cmu15545-索引并发控制(Concurrent Indexes)
目录 Overview Lock和Latch辨析 设计目标 大致分类 Hash Table Latches Page Latches Slot Latches B+Tree Latches 并发问题 ...
- vue-element-admin 左侧的导航栏固定展开
项目需要把左侧的导航栏固定打开,不关闭我们只需要打开store-modules-app.js文件中,把下面的代码给修改就可以了
- vue之项目部署
一.将vue项目打包同步文件到远程服务器 1. 打包 默认情况下,使用vue-cli创建的项目,package.json里的script应该已经配置了build指令,直接执行yarn build 或者 ...