详解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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
用Python实现KNN分类算法
2017/12/22 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
解决python3输入的坑——input()
2020/12/05 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
密封类可以有虚函数吗
2014/08/11 面试题
酒吧副总经理岗位职责
2013/12/10 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
保护野生动物倡议书
2014/05/16 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2015年司法局工作总结
2015/05/22 职场文书
军训新闻稿范文
2015/07/17 职场文书