解决VUEX的mapState/...mapState等取值问题


Posted in Javascript onJuly 24, 2020

有木有发现你页面的this.$store,一般都正常,但是总有那么几次,成为你页面报错的罪魁祸首!,那其实除了和vue的生命周期有关以外,还跟store取值的方式有关,下面就说一下新大陆之——mapState mapMutations mapGetters的使用

简单说一下我对mapState的理解,字面意思就是把store中state 的值遍历出来,任你取用,就不用写this.$store.getters.getState.openId等这么长的取值了,同理,mapMutations mapGetters也是把store中对应的mutations getters方法遍历出来

下面上代码,看一下具体怎么操作

store.js代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 showLoading0: true,
 showLoading1: true,
 showLoading2: true,
 showLoading3: true,
 // 头大不复制了......
 showLoading9: true,
 },
 // getters 适用于获取值,不会改变state原值
 getters: {
 getStore (state) {
  return state
 }
 },
 // 修改state
 mutations: {
 updateLoading (state, showLoading) {
  state.showLoading = showLoading
 }
 },
 actions: {

 }
})

原来vue中的代码

<script>
export default {
 data() {
 return {
  showLoading0: this.$store.getters.getStore.showLoading0,
  showLoading1: this.$store.getters.getStore.showLoading1,
  showLoading2: this.$store.getters.getStore.showLoading2,
  showLoading3: this.$store.getters.getStore.showLoading3,
  // 头大不复制了......
  showLoading9: this.$store.getters.getStore.showLoading9
 }
 },
 methods: {
 updateLoading() {
  this.$store.commit('updateLoading', false)
 }
 }
}
</script>

弱弱的问问看官,你脚的这个this.$store烦不烦,这要是有十个值,甚至要看到整整齐齐的十个this.$store…唉呀,真可怕,这时候mapState的用途就来了,看代码:

<script>
// 用之前要先引入vuex中的mapXXX方法
import { mapState } from 'vuex'
export default {
 data() {
 return {
  showLoading0: (state) => state.showLoading0
  showLoading1: (state) => state.showLoading1
  showLoading2: (state) => state.showLoading2
  showLoading3: (state) => state.showLoading3
  // 头大不复制了......
  showLoading9: (state) => state.showLoading9
 }
 }
}
</script>

听说你还不满意?那看看下面的简写吧,别被自己曾经的方法蠢哭哦~

// 用之前要先引入vuex中的mapXXX方法
import { mapState } from 'vuex'
export default {
 //data() {
 // return {
 // }
 //}
 // 对你没有看错哦,不用data接收了,直接用computed,使用和data里一模一样哦~
 // <h1 v-if="showLoading0">{{showLoading1}}</h1>
 // console.log(this.showLoading9)
 computed: {
 ...mapState([
  'showLoading0','showLoading1',....,'showLoading9'
 ])
 }
}

mapMutations mapGetters的使用也是同理

// 用之前要先引入vuex中的mapXXX方法
import { mapState } from 'vuex'
export default {
 // 使用 this.getStore()
 computed: {
 ...mapGetters([
  'getStore'
 ])
 },
 // 使用this.updateLoading() 
 // 就相当于this.$store.commit('updateLoading')
 methods: {
 ...mapMutations([
   'updateLoading'
  ]),
 }
}

其实最好采用computed的方式取值,这样会避免很多问题的发生,特别是数据更新不及时~

补充知识:vuex的mapState方法来获取vuex的state对象中属性

有两种写法

1.首先在组件中引入vuex的mapState方法:

import { mapState } from 'vuex'

然后在computed中这样写:

computed:{
  ...mapState({
    save:state => state.save//使用ES6的箭头函数来给count赋值
  })
}

2.需要先在组件中引入vuex的mapState方法:

import { mapState } from 'vuex'

然后在computed中这样写:

computed:

 ...mapState([' save'])
}

以上这篇解决VUEX的mapState/...mapState等取值问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
对vuex中store和$store的区别说明
Jul 24 #Javascript
小程序实现简单语音聊天的示例代码
Jul 24 #Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 #Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 #Javascript
javascript实现支付宝滑块验证码效果
Jul 24 #Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 #Javascript
如何通过vscode运行调试javascript代码
Jul 24 #Javascript
You might like
让PHP支持断点续传的源码
2010/05/16 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
php实现微信企业转账功能
2018/10/02 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js有序数组的连接问题
2013/10/01 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
iView框架问题整理小结
2018/10/16 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Django rest framework实现分页的示例
2018/05/24 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python中if有多个条件处理方法
2020/02/26 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
市场营销专业自荐书
2014/06/10 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL