vuex 辅助函数

vuex 内部封装了四个辅助函数,分别用来对应 state,getters,mutations,actions 的操作。

辅助函数,就是语法糖。

导入辅助函数

组件中

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

mapState

mapState 用来导入 vuex 的 state 对象里的属性,vuex 的 state 对象里的属性一般导入进计算属性 computed 里当计算属性使用。

演示,导入 vuex 的 state 对象里的 msg 属性到 computed

state 对象如下

export default new Vuex.Store({state:{msg:'辅助函数',},
}

组件如下

computed: {...mapState(['msg'])
}

组件相当于如下

computed: {msg:function(){return this.$store.state.msg}
}

mapGetters

mapGetters 用来导入 vuex 的 getters 对象里的方法,vuex 的 getters 对象里的方法一般导入进计算属性 computed 里当计算属性使用。

演示,导入 vuex 的 getters 对象里的 getName 方法到 computed 

getters 对象如下

getters: {getName:function(state){return '我是 getters 对象的 getName 方法'}
}

组件如下

computed:{...mapGetters(['getName']),
}

相当于如下

computed:{getName:function(){return this.$store.getters.getName}
}

mapMutations

mapMutations 用来生成触发 vuex 的 mutations 对象里的方法的方法。

演示,在 methods 里生成触发 vuex 的 mutations 对象的 changeMsg 方法的方法

mutations 对象如下

mutations:{changeMsg:function(state,params){state.msg = params}
},

组件如下

methods: {...mapMutations(["changeMsg"]),
},

组件相当如下

methods: {changeMsg:function(params) {this.$store.commit("changeMsg", params);},
},

mapActions

mapActions 用来生成触发 vuex 的 action 对象里的方法的方法。

演示,在 methods 里生成触发 vuex 的 action 对象的 asyncChangeMsg 方法的方法

action 对象如下

actions: {asyncChangeMsg:function(context){setTimeout(function(){// 1000 毫秒后触发 vuex 的 methods 对象里的 changeMsg 方法context.commit("changeMsg");}, 1000)}
}

组件如下

methods:{...mapActions(['asyncChangeMsg'])
}

组件相当如下

methods: {asyncChangeMsg:function(params) {this.$store.dispatch("asyncChangeMsg", params);},
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/64012.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

表白墙程序

目录 一、页面代码部分 二、设计程序 二、实现 doPost​编辑 三、实现 doGet 四、前端代码部分 五、使用数据库存储数据 一、页面代码部分 在之前的一篇博客中&#xff0c;已经写过了表白墙的页面代码实现&#xff0c;这里就不再重复了 页面代码如下&#xff1a; <!…

配置Redis

配置Redis6.0.8 注意: 执行此命令会自动切换到 root 用户 1.1 安装版本 6.0.8 for Linux&#xff08;redis-6.0.8.tar.gz&#xff09; 不用考虑在windows环境下对Redis的支持 1.2 安装步骤 1.2.1准备工作&#xff1a;下载安装最新版的gcc编译器 1&#xff09;安装C 语言的编译环…

【Spark】Pyspark RDD

1. RDD算子1.1 文件 <> rdd对象1.2 map、foreach、mapPartitions、foreach Partitions1.3 flatMap 先map再解除嵌套1.4 reduceByKey、reduce、fold 分组聚合1.5 mapValue 二元组value进行map操作1.6 groupBy、groupByKey1.7 filter、distinct 过滤筛选1.8 union 合并1.9 …

ubuntu22安装和部署Kettle8.2

前提 kettle是纯java编写的etl开源工具&#xff0c;目前kettle7和kettle8都需要java8或者以上才能正常运行。所以运行kettle前先检查java环境是否正确配置&#xff0c;java版本是否是8或者以上。 kettle安装 1、创建kettle目录&#xff0c;并将kettle的zip包解压到kettle目…

linux开启端口

目录 1.查看防火墙状态 1.1 开启防火墙 1.2 再次查看防火墙状态 2.开启指定端口 3. 重启防火墙 4.重新加载防火墙 5.查看已经开启的端口 1.查看防火墙状态 firewall-cmd --state 如果返回的是 not running&#xff0c;那么需要先开启防火墙&#xff0c; 1.1 开启防火…

QT中对话框界面的实现以及事件处理机制(核心机制)

对话框 消息对话框、字体对话框、颜色对话框、文件对话框 消息对话框 消息对话框提供了一个模态的对话框&#xff0c;用来提示用户信息&#xff0c;或者询问用户问题并得到回答 基于属性版本的API 使用该类调用构造函数&#xff0c;构造一个类对象调用成员函数exec进入执行…

机器人中的数值优化(五)——信赖域方法

本系列文章主要是我在学习《数值优化》过程中的一些笔记和相关思考&#xff0c;主要的学习资料是深蓝学院的课程《机器人中的数值优化》和高立编著的《数值最优化方法》等&#xff0c;本系列文章篇数较多&#xff0c;不定期更新&#xff0c;上半部分介绍无约束优化&#xff0c;…

写的一款简易的热点词汇记录工具

项目需要对用户提交的附件、文章、搜索框内容等做热词分析。如下图&#xff1a; 公司有大数据团队。本着不麻烦别人就不麻烦别人的原则&#xff0c;写了一款简易的记录工具&#xff0c;原理也简单&#xff0c;手工在业务插入锚点&#xff0c;用分词器分好词&#xff0c;排掉字…

字符函数和字符串函数(2)

目录 memcpy memmove memcmp memcpy void * memcpy ( void * destination, const void * source, size_t num ); 1.函数memcpy从source的位置开始向后复制num个字节的数据到destination的内存位置。 2.这个函数在遇到 \0 的时候并不会停下来。 3.如果source和destination有…

Ansible-playbook循环学习

循环语句简介 我们在编写playbook的时候&#xff0c;不可避免的要执行一些重复性操作&#xff0c;比如指安装软件包&#xff0c;批量创建用户&#xff0c;操作某个目录下的所有文件等。正如我们所说&#xff0c;ansible一门简单的自动化语言&#xff0c;所以流程控制、循环语句…

Ceph入门到精通-LVS基础知识

LB集群: &#xff08;Load Balancing&#xff09;即负载均衡集群,其目的是为了提高访问的并发量及提升服务器的性能&#xff0c;其 实现方式分为硬件方式和软件方式。 硬件实现方式&#xff1a; 常用的有 F5公司的BIG-IP系列、A10公司的AX系列、Citrix公司的 NetScaler系列…

VisualStudio配置pybind11-Python调用C++方法

个人测试下来Debug生成的dll改pyd&#xff0c;py中import会报错gilstate->autoInterpreterState 如果遇到同样问题使用Release吧 目录 1.安装pybind11 1.pip&#xff1a; 2.github&#xff1a; 2.配置VS工程 2.在VC目录中的包含目录添加&#xff1a; 3.在VC目录中的库目录…

【Web系列二十四】使用JPA简化持久层接口开发

目录 环境配置 1、引入依赖 配置文件 代码编写 实体类创建 JPA常用注解 Service与ServiceImpl Service ServiceImpl Controller Dao 三种实现Dao功能方式 1.继承接口&#xff0c;使用默认接口实现 2.根据接口命名规则默认生成实现 3.自定义接口实现(类似MyBatis…

LeetCode-134-加油站-贪心思路

题目描述&#xff1a; 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 给定两个整数…

汽车类 ±0.25°C SPI 温度传感器,TMP126EDBVRQ1、TMP126EDCKRQ1、TMP127EDBVRQ1引脚配置图

一、概述 TMP126-Q1 是一款精度为 0.25C 的数字温度传感器 &#xff0c; 支持的环境温度范围为 -55C 至 175C 。TMP126-Q1 具 有 14 位 &#xff08; 有符号 &#xff09; 温度分辨率(0.03125C/LSB)&#xff0c;并且可在 1.62V 至 5.5V 的电源电压范围内工作。TMP126-Q1 具有转…

同创永益入选首批“金融数字韧性与混沌工程实践试点机构”

8月16日下午&#xff0c;由北京国家金融科技认证中心、北京国家金融标准化研究院联合主办的“传递信任 服务发展”金融科技标准认证生态大会在太原成功举办。中国金融电子化集团有限公司党委书记、董事长周逢民&#xff0c;中国科学院院士冯登国&#xff0c;中国工商银行首席技…

Unity 粒子特效遮罩(ParticleMask)

1.需求&#xff1a; 游戏中粒子特效能实现非常好的效果&#xff0c;但是由于粒子特效是独立的系统&#xff0c;Unity自带的Mask普通的遮罩&#xff0c;遮不住粒子特效。 2.实现原理&#xff1a; 通过shader把超出范围的粒子纹理(Texture)&#xff0c;改成透明颜色&#xff0…

Python安装指南(Windows版)

安装python环境 官网下载地址&#xff1a; Download Python | Python.org 我选择3.10.4版本&#xff0c;当然你也可以选择其他版本 安装 安装完成&#xff0c;需要验证是否安装成功。 打开CMD窗口&#xff0c;输入python命令&#xff0c;如果进入如下python窗口则安装成功&…

redis-lua脚本-无参-比较2个数值

以下是演变的过程&#xff1a; eval " return haha " 0 eval " local res haha; return res; " 0 eval " local value1 redis.call(get,value1); local value2 redis.call(get,value2);return value1; " 0 eval " return 1 < 2;…

docker打包vue vite前端项目

打包vue vite 前端项目 1.打包时将测试删除 2.修改配置 3.打包项目 npm run build 显示成功&#xff08;黄的也不知道是啥&#xff09; 打包好的前端文件放入 4.配置 default.conf upstream wms-app {server 你自己的ip加端口 ;server 192.168.xx.xx:8080 ; } server { …