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. 「模拟赛」多校 A 层联训 8

    \(22pts\),本来可以切掉前两个题的?! A. 传送 (teleport) 签到 12 pts,错的很唐!我把 Dij 用的 dis 数组直接赋值成了点到 1 号点之间的 x 距离和 y 距离的 ...

  2. mysql主从复制详细部署

    1.异步复制:这是MySQL默认的复制模式.在这种模式下,主库在执行完客户端提交的事务后会立即将结果返回给客户端,并不关心从库是否已经接收并处理.这种模式的优点是实现简单,但缺点是如果主库崩溃,已经提 ...

  3. 工作中的技术总结_ form表单的前后台交互 _20210825

    工作中的技术总结_ form表单的前后台交互 _20210825 在项目经常会使用 form 表单 进行数据的 页面展示 以及数据的 提交和后台处理 1.数据是怎么从后台传递到前台的 model.ad ...

  4. ArgoWorkflow教程(八)---基于 LifecycleHook 实现流水线通知提醒

    本篇介绍一下 ArgoWorkflow 中的 ExitHandler 和 LifecycleHook 功能,可以根据流水线每一步的不同状态,执行不同操作,一般用于发送通知. 1. 概述 本篇介绍一下 ...

  5. 每日学学Java开发规范,OOP规约(附阿里巴巴Java开发手册(终极版))

    前言 每次去不同的公司,码不同的代码,适应不同的规范,经常被老大教育规范问题,我都有点走火入魔的感觉,还是要去看看阿里巴巴Java开发规范,从中熟悉一下,纠正自己,码出高效,码出质量. 想细看的可以去 ...

  6. 4.6 Linux解压.gz格式的文件(gunzip命令)

    gunzip 是一个使用广泛的解压缩命令,它用于解压被 gzip 压缩过的文件(扩展名为 .gz). 对于解压被 gzip 压缩过的文件,还可以使用 gzip 自己,即 gzip -d 压缩包. gu ...

  7. 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 ...

  8. 算法笔记——马拉核弹(Mana Nuclear)

    0x00 摘要 "马拉核弹"算法由 SXHT 同学(2009~今)发明,并在 2024 年 11 月于某不知名学校机房内正式公布.该算法基于 1975 年发明的 Manacher ...

  9. oracle查询是否锁表以及解锁语句

    --锁表语句 SELECT b.owner, b.object_name, a.session_id, a.locked_mode FROM v$locked_object a, dba_object ...

  10. 条理清晰,浅显易懂:Lua语法基础知识(第二部分)

    今天我们继续学习Lua语法基础教程,中篇. 五.变量 5.1 number变量 变量,可以看作是一个桶,在里面装你想要装的内容.这些内容可以是Lua包含的所有合法类型. 例如:我想要新建一个桶,名叫b ...