详解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 代码集(学习js的朋友可以看下)
Jul 22 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
JavaScript函数重载操作实例浅析
May 02 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将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python随机生成库faker库api实例详解
2019/11/28 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
创联软件面试题笔试题
2012/10/07 面试题
三年大学自我鉴定
2014/01/16 职场文书
小学新教师培训方案
2014/02/03 职场文书
军人违纪检讨书
2014/02/04 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
部门2014年度工作总结
2014/11/12 职场文书
三孔导游词
2015/02/05 职场文书
企业法人任命书
2015/09/21 职场文书
《海上日出》教学反思
2016/02/23 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
使用Django框架创建项目
2022/06/10 Python