详解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 相关文章推荐
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
jQuery操作cookie
Aug 08 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
vue实现标签云效果的示例
Nov 09 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
如何正确理解PHP的错误信息
2006/10/09 PHP
php学习笔记之 函数声明
2011/06/09 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
初识PHP
2014/09/28 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php判断目录存在的简单方法
2019/09/26 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
Prototype框架详解
2015/11/25 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
itchat接口使用示例
2017/10/23 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
25道Java面试题集合
2013/05/21 面试题
珍珠鸟教学反思
2014/02/01 职场文书
js之ajax文件上传
2021/05/13 Javascript
使用pandas模块实现数据的标准化操作
2021/05/14 Python
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript