详解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系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
js charAt的使用示例
Feb 18 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
js倒计时显示实例
Dec 11 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
react中Suspense的使用详解
Sep 01 Javascript
vue实现倒计时功能
Mar 24 Vue.js
JS数组的常用方法整理
Mar 31 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
对javascript和select部件的结合运用
2006/10/09 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
JS的get和set使用示例
2014/02/20 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
2014年元旦感言
2014/03/06 职场文书
电子信息工程自荐信
2014/05/26 职场文书
英语专业求职信
2014/07/08 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
毕业生自荐信范文
2015/03/05 职场文书
投标售后服务承诺书
2015/04/29 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
python中__slots__节约内存的具体做法
2021/07/04 Python
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript