首页 > 其他分享 >vue——vuex四个map方法的使用

vue——vuex四个map方法的使用

时间:2022-08-31 18:56:04浏览次数:57  
标签:map vue vuex xxx mapState mapActions mapMutations 方法 store

1.mapState方法:

用于帮助我们映射state中的数据为计算属性

注意1:mapState的作用:用来生成重复代码,比如return this$store.state.xxx就非常重复,无法复用。mapState采用{k:v}形式

注意2:不能把mapState({he:‘sum’,xuexiao:‘school’,xueke:‘subject’})直接放上去会报错,因为这是返回的一个对象,请使用ES6语法:...mapState({})

2.mapGetters方法:

用于帮助我们映射getters中的数据为计算属性

3.mapActions方法:

用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数

4.mapMutations方法:

用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。

注意:使用mapMutations与mapActions若需要传递参数,必须在绑定事件时就传参

 

标签:map,vue,vuex,xxx,mapState,mapActions,mapMutations,方法,store
From: https://www.cnblogs.com/MDRY/p/16644214.html

相关文章

  • 20220829 第一组 于芮 Vue坏人Tomcat入门
     小白成长记——第三十七天    这几天的主要学习内容就是Vue以及简单的Tomcat在ideal中的配置,总体来说说学习内容很多,每天都很充实,时间都用来学习,整个人都很开心......
  • vue直接赋值后数据不更新
    在写vue的时候,存在某些情况,明明赋值给model了,页面数据不变化。原因我就不仔细分析了,下面直接上解决办法:1.1、Vue不能检测以下变动的数组当你利用索引直接设置一个项时,......
  • VUE学习2
    目录分析public目录index.html是起始的html文件#这是关键<divid="app"></div>src目录main.js是Vue项目的入口文件属性props:接受父组件传过来的值props:{m......
  • vue3+ts项目声明响应式数据
    说明:在项目开发中,需要声明响应式数据来实现界面的响应从而实现前后端数据的交互。我们主要分为两类来举例。基本数据类型声明方式letxxx=ref<type>('defaultValue'......
  • Vue中报npm WARN idealTree Removing dependencies.element-ui in favor of devDepend
    在添加element-ui的时候我是用的是:npmielement-ui--save-dev或npmielement-ui-S都会报错npmWARNidealTreeRemovingdependencies.element-uiinfavorofdevD......
  • Vue Cli4.5版本手机端适配(rem)
    1.安装amfe-flexible(根据屏幕动态改变根元素font-size,postcss-pxtorem把代码中px转为rem)npmiamfe-flexible-S2.安装postcss-pxtorem(一款PostCSS插件,用于将px单位转......
  • 安装vue环境
    1)获取node.js安装包Node.js安装包及源码下载地址为:https://nodejs.org/en/download/(2)Linux上安装Node.jswgethttps://nodejs.org/dist/v16.13.1/node-v16.13.1-linu......
  • VUE---公钥私钥加密解密
    最近在开发一些项目,前后端数据分离开发项目,涉及到数据的安全性,需要考虑:1、前端提交数据,进行加密,后端解密。2、前端渲染数据,进行解密,后端加密。第一步:生成加密/解密公钥......
  • vue-cli 配置优化
    本文整理了一些vue开发中常用vue-cli配置,使用的vue-cli版本为3.11.0,主要内容包括:移除preload与prefetch使用webpack-bundle-analyzer做打包分析使用ters......
  • 区块相隔虽一线,俱在支付同冶熔,Vue3.0+Tornado6前后端分离集成Web3.0之Metamask区块
    最近几年区块链技术的使用外延持续扩展,去中心化的节点认证机制可以大幅度改进传统的支付结算模式的经营效率,降低交易者的成本并提高收益。但不能否认的是,区块链技术也存在......