详解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下的keyCode键码值表
Apr 10 Javascript
YUI模块开发原理详解
Nov 18 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
JavaScript代码实现简单计算器
Dec 27 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 join函数应用
2011/05/04 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
大学社团活动总结
2014/04/26 职场文书
小学社团活动总结
2014/06/27 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
邀请函的格式
2015/01/30 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
Python Parser的用法
2021/05/12 Python
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL