mapState与mapGetters语法糖

mapState与mapGetters语法糖vuex中的mapState,mapGetters属于辅助函数,其实就是vuex的一个语法糖,使代码更简洁更优雅。<script>import{mapState,mapGetters}from”vuex”exportdefault{computed:{ //原先templateInfo(){ returnthis.$store.state.templateInfo},//现在

大家好,又见面了,我是你们的朋友全栈君。

vuex中的 mapState,mapGetters 属于辅助函数,其实就是vuex的一个语法糖,使代码更简洁更优雅。

import { 
    mapState, mapGetters } from "vuex"
export default { 
   
    computed: { 
   
    	//原先state中的数据
        templateInfo(){ 
   
        	return this.$store.state.templateInfo
        },
        //现在
        ...mapState([
            "templateInfo",   
        ]),
        //原先getters中的数据
        isPreview(){ 
   
        	return this.$store.getters.isPreview
        },
        //现在
        ...mapGetters([
            'isPreview'
        ])
    },
    created(){ 
   
     	//使用时
     	this.templateInfo,
     	this.isPreview
	}
}

mapState与mapGetters只能在computed中使用,与正常的computed中的函数一起使用时需要用扩展运算符,然后在mapState或mapGetters函数的数组中放入对应的state或getters中的名称。

1.若要使用某个模块中的state,则第一个参数是模块名称

...mapState("moduleA", { 
   
      test1: state => state.test1,
      test2: "test2"
 }),

2.若要使用多个模块中的state,以上方法有点太累赘,则用以下方法

...mapState({ 
   
      currentType: state => state.app.currentType,
      userId: state => state.user.userId,
}),

以上两种方法对getters同样有效。

3.通过state中的值再动态计算出getters中的值

const getters = { 
   
  alarmName: state => { 
   
    return (row) => state.app.alarmTypes.find(item => item.alarmType == row.alarmType)
  },
},
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/145174.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • JavaScript Array(数组)清空[通俗易懂]

    JavaScript Array(数组)清空[通俗易懂]JavaScriptArray(数组)清空可采用三种方式:假设有数组:vara=[1,2,3];1、将长度属性置0。该方式最快捷a.length=0;2、使用splice移除a.splice(0,a.length);3、新建一个数组a=[];该方法可能会导致内存泄漏,最好能显式删除对象。

    2022年7月13日
    12
  • 手把手教你制作一个简单的聊天机器人(图灵api)「建议收藏」

    手把手教你制作一个简单的聊天机器人(图灵api)「建议收藏」前言:在无聊的时候打打游戏、听听歌还不如来找个人来陪你聊天,今天来教大家制作一个聊天机器人,这样就不会无聊了,在线聊天机器人地址借愁哥哥机器人(可能有点丑,大家将就一下(????))这个接口就目前的一天100次聊天机会,大家要珍惜哦,源码在文章末尾哦!效果图:目录:一.准备工作二.项目开始1.页面布局:2.样式层:3.逻辑实现:一.准备工作通过分析我们需要以下的具体准备:对于界面的分析,我们需要用到的插件:jQuery,我们采用的是flex弹性布局,既然使用的是图灵机器人

    2022年7月18日
    22
  • 初学者计算机电脑怎样学,初学者怎样学习电脑能够快速入门(免费科普电脑基础知识)…

    初学者计算机电脑怎样学,初学者怎样学习电脑能够快速入门(免费科普电脑基础知识)…上次回答了一个关于怎样自学电脑操作比较快的问题,现在我把我的答案整理升级,增加了键盘的快速入手使用方法。发布出来,以便更多的人能够有所收获。1.开机和关机作为完全初学者,首先需要学会正确的开关机。下图我整理了一些常见主机的开关机键与重启(restart)按键。常见主机上的开关机键和重启键一般来说,较大的一个是开关机键,较小的一个为重启键。在电脑处于关闭状态时,按一下开关机键即为开机。当电脑处于开…

    2022年10月19日
    0
  • 多重共线性检验-方差膨胀系数(VIF)-相关系数(机器学习)sklearn

    多重共线性检验-方差膨胀系数(VIF)-相关系数(机器学习)sklearn文章目录多重共线性检验-方差膨胀系数(VIF)1、原理:2、多重共线性:3、检验方法:方差膨胀系数(VIF):相关性检验:4、代码测试4.1导入相关库4.2准备数据4.3计算膨胀因子4.4计算相关系数4.5分割测试集4.6模型选择4.7AUC值4.8模型调整4.8.1删除账户资金4.8.2删除累计交易佣金5、总结多重共线性检验-方差膨胀系数(VIF)1、原理:方差膨胀系数是衡量多元线性回归模型中多重共线性严重程度的一种度量。它表示回归系数估计量的方差与假设自变量间不线性相关时方差相比的比值。

    2022年6月9日
    45
  • Apache Tomcat

    Apache TomcatApache Tomcat

    2022年4月24日
    39
  • vs2012激活密钥永久_win7简易版激活密钥

    vs2012激活密钥永久_win7简易版激活密钥VS2012有效注册密钥 Microsoft Visual Studio Ultimate 2012 旗舰版 有效注册密钥:YKCW6-BPFPF-BT8C9-7DCTH-QXGWC原文地址

    2022年10月14日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号