解决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 相关文章推荐
javascript 清空form表单中某种元素的值
Dec 26 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
深度解读vue-resize的具体用法
Jul 08 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字符串的连接的简单实例
2013/12/30 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
php数组去除空值函数分享
2015/02/02 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
js工具方法弹出蒙版
2013/05/08 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python lxml模块安装教程
2015/06/02 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
工地例会施工汇报材料
2014/08/22 职场文书
合作经营协议书范本
2014/09/16 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
旅游安全责任协议书
2016/03/22 职场文书
二年级作文之动物作文
2019/11/13 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
JS实现简单的九宫格抽奖
2022/06/28 Javascript