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. 基于乐鑫 ESP32-C3 的 Matter Light 实践

    背景介绍 最近公司在研究 Matter 协议在智能家居领域的市场机会,考虑到易用性和文档支撑等方面,相比较 Telink,产品部门对乐鑫的 Matter-SDK 更感兴趣,因而开展了一些测试工作,毕竟 ...

  2. 在 KubeSphere 中开启新一代云原生数仓 Databend

    作者:尚卓燃(https://github.com/PsiACE),Databend 研发工程师,Apache OpenDAL (Incubating) PPMC. 前言 Databend 是一款完全 ...

  3. 为什么样本方差是除以 n-1 而不是 n?

    摘自https://www.zhihu.com/question/20099757/answer/13971886 https://www.zhihu.com/question/20099757/an ...

  4. Webpack热加载显示 'Cannot get /' 解决办法

    安装webpack-dev-server后,用 npm 打包运行,打开后显示 'Cannot get /' : 需要在webpack.config.js的devServer中添加以下代码: 现在再次运 ...

  5. Paimon lookup store 实现

    Lookup Store 主要用于 Paimon 中的 Lookup Compaction 以及 Lookup join 的场景. 会将远程的列存文件在本地转化为 KV 查找的格式. Hash htt ...

  6. C240731B

    B 游戏类问题 先假设一瓶毒药都不用, 先把治疗的贡献加进答案里面,这样治疗.毒药.攻击的贡献分别是独立的. 如果 \(i\) 位置本来是治疗, 那么用毒药多扣的血是 \(a[i]=(p+r) \ti ...

  7. (Redis基础教程之十) 如何在Redis中运行事务

    介绍 Redis是一个开源的内存中键值数据存储.Redis允许您计划一系列命令,然后一个接一个地运行它们,这一过程称为_transaction_.每个事务都被视为不间断且隔离的操作,以确保数据完整性. ...

  8. redis之性能优化

    1 redis-cli命令的 --stat选项 关于stat选项,官网也是介绍的比较简单.使用redis-cli命令加上stat选项可以实时监视redis实例,比如当前节点内存中缓存的 key总数以及 ...

  9. Go操作数据库之MySQL

    安装mysql驱动: go get -u github.com/go-sql-driver/mysql 初始化模块 go mod init m 执行 go mod tidy 导入包: package ...

  10. Blazor 组件库 BootstrapBlazor 中Row组件介绍

    组件介绍 在Bootstrap中,我们经常使用row和col通过栅格化来控制显示位置. 如 <div class="row"> <div class=" ...