解决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.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
JavaScript 如何计算文本的行数的实现
Sep 14 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
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
浅析python标准库中的glob
2020/03/13 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
新郎婚宴答谢词
2014/01/19 职场文书
企业内部培训方案
2014/02/04 职场文书
公司请假条格式
2014/04/11 职场文书
教师演讲稿开场白
2014/08/25 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
老公保证书
2015/01/17 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python