解决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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
js实现圆形菜单选择器
Dec 03 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的SQL注入过程分析
2012/01/06 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php自动获取关键字的方法
2015/01/06 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
canvas绘制七巧板
2017/02/03 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Cpy和Python的效率对比
2015/03/20 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
深入浅析Python代码规范性检测
2020/07/31 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
几个SQL的面试题
2014/03/08 面试题
大学生活学习的自我评价
2013/12/03 职场文书
党课学习思想汇报
2014/01/02 职场文书
争先创优演讲稿
2014/09/15 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
python调试工具Birdseye的使用教程
2021/05/25 Python
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
MySQL慢查询优化解决问题
2022/03/17 MySQL