import store from "./store"
computed: {
useName: function() {
return store.state.userName
}
}
  mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?
  通常,我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符(现处于 ECMASCript 提案 stage-3 阶段),我们可以极大地简化写法:
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前面三个点到底是什么意思:对象展开运算符的更多相关文章

  1. vue的vuex在使用...mapState 和...mapGetter报错的解决方案

    from:https://blog.csdn.net/ysterling/article/details/88145765 采用mapState 和mapGetter,在页面使用时报错,这是因为bab ...

  2. vuex 源码:深入 vuex 之辅助函数 mapState

    前言 当一个组件要获取多个 state 的时候,声明计算属性就会变得重复和冗余了.我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性. 所以我们得清楚,mapState 的作用就是帮 ...

  3. vue辅助函数mapStates与mapGetters

    状态管理器 <!-- store.js: --> import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export de ...

  4. [转] Vuex入门(2)—— state,mapState,...mapState对象展开符详解

    1.state  state是什么? 定义:state(vuex) ≍ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 ...

  5. DDD 领域驱动设计-三个问题思考实体和值对象(续)

    上一篇:DDD 领域驱动设计-三个问题思考实体和值对象 说实话,整理现在这一篇博文的想法,在上一篇发布出来的时候就有了,但到现在才动起笔来,而且写之前又反复读了上一篇博文的内容及评论,然后去收集资料, ...

  6. JavaScript -- 时光流逝(三):js中的 String 对象的方法

    JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...

  7. Python3从零开始爬取今日头条的新闻【三、滚动到底自动加载】

    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...

  8. 理解Vuex的辅助函数mapState, mapActions, mapMutations用法

    在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的 ...

  9. [转]理解Vuex的辅助函数mapState, mapActions, mapMutations用法

    原文地址:https://www.cnblogs.com/tugenhua0707/p/9794423.html 在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 ...

  10. Vue 爬坑之路(三)—— 使用 vue-router 跳转页面

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...

随机推荐

  1. 云原生爱好者周刊:Cilium 放大招,发布服务网格 Beta 版

    云原生一周动态要闻: Cilium 推出服务网格测试计划 Knative 已申请成为 CNCF 的孵化项目 Kubernetes v1.23 即将发布 Lens 5.3 发布 开源项目推荐 文章推荐 ...

  2. 云原生周刊 | 人类、机器人与 Kubernetes

    近日 Grafana 官网发表了一篇博客介绍了 2022 年比较有意思.脑洞大开的一些 Grafana 使用案例,比如监控特斯拉 Model 3 的充电状态.OTA 更新状况等等. 海事技术供应商 R ...

  3. AWS-最佳实践-杂信息

    1.Amazon Aurora Serverless v1 AmazonAurora-Serverless版本1是亚马逊Aurora的按需自动缩放配置.Aurora Serverlessv1 DB集群 ...

  4. 谈一谈 Netty 的内存管理 —— 且看 Netty 如何实现 Java 版的 Jemalloc

    本文基于 Netty 4.1.112.Final 版本进行讨论 在之前的Netty 系列中,笔者是以 4.1.56.Final 版本为基础和大家讨论的,那么从本文开始,笔者将用最新版本 4.1.112 ...

  5. 4.4 Linux解压.zip格式的文件(unzip命令)

    unzip 命令可以查看和解压缩 zip 文件.该命令的基本格式如下: [root@localhost ~]# unzip [选项] 压缩包名 此命令常用的选项以及各自的含义如表 1 所示. 选项 含 ...

  6. 【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02

    随着人工智能技术的不断发展,阿里体育等IT大厂,推出的"乐动力"."天天跳绳"AI运动APP,让云上运动会.线上运动会.健身打卡.AI体育指导等概念空前火热.那 ...

  7. app&小程序&web安全—sign签名绕过

    零.前言 在web界面登陆时,小程序和app传输数据时经常会碰到签名,会对请求的参数进行签名,如果自己修改了数据包就会校验失败非常麻烦. 本文编写的契机就是因为碰到了一个JeecgBoot的小程序, ...

  8. Windows 使用 Intel(R) Arc(TM) GPU 推理ONNX 模型

    这不刚换了一个笔记本电脑,Thinkpad T14P,带有Intel ARC GPU,今天我们来尝试用这个GPU来推理ONNX模型. 环境安装 查阅了相关文档,最好使用py310环境,其他版本可能存在 ...

  9. 文件上传漏洞&靶场通关详解

    文件上传漏洞&靶场通关详解 什么是文件上传漏洞? 大部分网站都拥有上传文件的部分,文件上传漏洞是由于网站开发者对用户上传文件的过滤不够严格,攻击者可以通过这些漏洞上传可执行文件(如木马,恶意脚 ...

  10. 整合Sleuth

    Sleuth是 springcloud 分布式跟踪解决方案. Sleuth 术语: 跨度(span ) :Sleuth 的基本工作单元,他用一个64位的id唯一标识.出ID外,span还包含 其他的数 ...