详解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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
浅析JS运动
Dec 28 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
react-native 封装选择弹出框示例(试用ios&android)
Jul 11 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
vue实现修改图片后实时更新
2019/11/14 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
django 类视图的使用方法详解
2019/07/24 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
组织委员竞选稿
2015/11/21 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
创业计划书之餐饮
2019/09/02 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
Python中itertools库的四个函数介绍
2022/04/06 Python