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. KubeSphere 核心架构浅析

    作者简介:万宏明,KubeSphere 核心贡献者,专注于云原生安全领域. KubeSphere 是在 Kubernetes 之上构建的面向云原生应用的容器混合云管理系统.支持多云与多集群管理,提供全 ...

  2. Iterator和Iterable

    Java遍历List有三种方式 public static void main(String[] args) { List<String> list = new ArrayList< ...

  3. docker容器开启ssh服务

    http://www.dtmao.cc/news_show_703007.shtml Step1 利用CentOS基础镜像,创建一个docker容器,主要这里要指定端口映射,必须要映射到容器内的22端 ...

  4. 2024 CSP 游记

    \(\text{CSP-J}\) 游记 \(\text{Day -INF}\) 初赛免了,没有游记. \(\text{Day 0}\) 有点慌,于是打开了游戏跟 \(\text{zjx,sym}\) ...

  5. 阿里云免费SSL证书申请全过程(图文详解)

    下面我们来详细说下阿里云的域名是如何注册购买,解析绑定的. 首先,打开阿里云官网 ​万网早就被阿里云收购了,所以是同一家.输入你想购买的域名,我这里是随便输入了"aliyun.com&quo ...

  6. 【问题解决】java.lang.SecurityException: JCE cannot authenticate the provider BC

    问题复现 历史项目升级JDK(由1.7升级到8),进行加密/解密时出现报错java.lang.SecurityException: JCE cannot authenticate the provid ...

  7. 5.3 Linux Vim三种工作模式

    通过前面的学习我们知道,Linux 系统中所有的内容都以文件的形式进行存储,当在命令行下更改文件内容时,常会用到文本编辑器. 我们首选的文本编辑器是 Vim(至于为什么,可查看<Vi和Vim之间 ...

  8. cmu15545-索引并发控制(Concurrent Indexes)

    目录 Overview Lock和Latch辨析 设计目标 大致分类 Hash Table Latches Page Latches Slot Latches B+Tree Latches 并发问题 ...

  9. vue-element-admin 左侧的导航栏固定展开

    项目需要把左侧的导航栏固定打开,不关闭我们只需要打开store-modules-app.js文件中,把下面的代码给修改就可以了

  10. vue之项目部署

    一.将vue项目打包同步文件到远程服务器 1. 打包 默认情况下,使用vue-cli创建的项目,package.json里的script应该已经配置了build指令,直接执行yarn build 或者 ...