详解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 相关文章推荐
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
微信小程序模板(template)使用详解
Jan 31 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
JS 创建对象的模式实例小结
Apr 28 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
vue+element UI实现树形表格
2020/12/29 Vue.js
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python中join函数简单代码示例
2018/01/09 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
村委会贫困证明
2014/01/14 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
有趣的广告词
2014/03/18 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
python中pycryto实现数据加密
2022/04/29 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
Go 内联优化让程序员爱不释手
2022/06/21 Golang
Python实现数据的序列化操作详解
2022/07/07 Python