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. C#使用 MailKit 收发邮件

    目录 获取QQ邮箱授权码 安装 MailKit 配置邮件服务器信息 实现邮件收发方法 测试邮件收发 参考文章 获取QQ邮箱授权码 打开QQ邮箱,进入 设置->账号 页面: 在 POP3/IMAP ...

  2. C语言刷题小知识点

    力扣返回二维数组 int **spiralMatrix(int m, int n, struct ListNode *head, int *returnSize, int **returnColumn ...

  3. DHorse v1.6.0 发布,基于 k8s 的发布平台

    版本说明 新增特性 支持Codeup(阿里云云效)代码仓库: 支持环境的自动部署: 优化特性 管理员角色部署环境部需要审批: 优化页面展示: 升级指南 升级指南 DHorse介绍 DHorse是一个轻 ...

  4. manim边学边做--通用二维坐标系

    Manim的Axes对象是通用的坐标系对象,之前几篇介绍的数轴和各种坐标平面都是继承Axes对象. Axes对象的主要作用在于创建和管理二维坐标轴,以满足我们制作数学动画时的各种需求. 具体来说,Ax ...

  5. house of banana

    条件: 1.任意地址写一个堆地址 2.触发exit函数 3.能泄露堆地址和基地址 原理: 伪造 fini_array 赋值用到的结构体 从而控制程序exit时的程序执行流 ld.so 中存在 _rtl ...

  6. Flink RetractStream示例及UDF函数实现

    介绍 今天在Flink 1.7.2版本上跑一个Flink SQL 示例 RetractPvUvSQL,报 Exception in thread "main" org.apache ...

  7. 痞子衡嵌入式:在i.MXRT启动头FDCB里配置串行NOR Flash多个寄存器的注意事项

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是在FDCB里配置串行NOR Flash多个寄存器的注意事项. 关于使用 i.MXRT 启动头 FDCB 来设置 Flash 内部寄存器, ...

  8. Moebius for SQL Server

    Moebius(莫比斯)介绍 Moebius数据库多活集群是格瑞趋势为SQL Server数据库研发的能够同时满足可用性.数据安全.容灾.读写分离.负载均衡的一站式多活集群.集群的名字取自Moebiu ...

  9. .NET9 - 新功能体验(三)

    书接上回,我们继续来聊聊.NET9和C#13带来的新变化. 01.Linq新方法 CountBy 和 AggregateBy 引入了新的方法 CountBy 和 AggregateBy后,可以在不经过 ...

  10. MySQL创新版9.1.0于2024年10月15日正式发布-新功能特性先睹为快[译]

    这个十月发布的版本是MySQL宣布转向新的LTS/Innovation发布模式后的第三个长期支持(LTS)版本和第二个创新(Innovation)版本.更多细节请参见MySQL发布:创新和长期支持.在 ...