详解Vuex中mapState的具体用法


Posted in Javascript onSeptember 28, 2017

今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了。真是天雷滚滚~~~~~~

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,
})
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都是一样的道理。牢记~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
ES10的13个新特性示例(小结)
Sep 23 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 #Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 #Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 #Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 #Javascript
angular4自定义组件详解
Sep 28 #Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 #Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 #Javascript
You might like
PHP 强制下载文件代码
2010/10/24 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
初学Python函数的笔记整理
2015/04/07 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python实现按行切分文本文件的方法
2016/04/18 Python
深入理解python函数递归和生成器
2016/06/06 Python
使用Python绘制图表大全总结
2017/02/11 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python单例设计模式实现解析
2020/01/07 Python
np.dot()函数的用法详解
2020/01/17 Python
python自动生成证件号的方法示例
2021/01/14 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
angular4实现带搜索的下拉框
2022/03/25 Javascript