解决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序列化表单去除指定元素示例代码
Apr 10 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
vue调用语音播放的方法
Sep 27 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 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/06/30 PHP
jQuery 源码分析笔记
2011/05/25 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
js常用函数 不错
2006/09/08 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python自动生产表情包
2017/03/17 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python pymongo模块常用操作分析
2018/09/01 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
卫生巾广告词
2014/03/18 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
三问三解心得体会
2014/09/05 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript