解决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 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
将查询条件的input、select清空
Jan 14 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP 中的一些经验积累
2006/10/09 PHP
用来给图片加水印的PHP类
2008/04/09 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
python的类方法和静态方法
2014/12/13 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python可视化text()函数使用详解
2020/02/11 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Python字符串三种格式化输出
2020/09/17 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
思想政治自我鉴定
2013/10/06 职场文书
求职简历推荐信范文
2013/12/02 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书