Vuex:辅助函数:mapState,mapMutations,mapActions,mapGetters

说明

Vuex中提供了四个个比较常用的辅助函数:目的是将vuex中对应的 state(),mutaiions{},actions{},getters{}中的数据,函数映射出去,让我们在组件中可以更加简单的使用这些数据与函数

  1. mapState
  2. mapMutations
  3. mapActions
  4. mapGetters

使用案列

/src/store/index.js状态管理器

import axios, { Axios } from 'axios';
import { CHANGE_APPISSHOW } from './type.js'
import { createStore } from 'vuex'const store = createStore({state() {return {appIsShow: true,datalist: [],}},//同步mutations: {//参数state:是vuex自动给我们注入进来的。我们调用的时候不需要传递这个参数,直接传递第二个参数boolParams即可//参数boolParams: 是我们定义的参数,用户在发起调用的时候自己传入changeAppIsShow(state, boolParams) {state.appIsShow = boolParams;},dataListInit(state, arrParams) {state.datalist = arrParams;}},//异步+同步:action不能直接修改state()中的数据,它是也是向mutations提交数据来修改的。actions: {async getDataList(store) {//异步const result = await axios({url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=3777796",headers: {'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16992764191480200349024257","bc":"110100"}','X-Host': 'mall.film-ticket.cinema.list'}});console.log("获取数据")//同步:向mutations提交数据:触发dataListInit函数,并向函数传递了一个数组参数store.commit("dataListInit", result.data.data.cinemas);}},//getters:就相当于vue的计算属性。为什么vue有computed计算属性了,这里还要搞一个getters呢?那是因为架构师想尽可能的把数据的处理过程放到vuex中,vue就作为一个展示数据的地方,实现纯粹的业务,数据分离//getters:的函数传递参数需要放到匿名函数中来做getters: {filterDataList(state) { //这个state就是state()中的数据return (intParams) => { //这个intParams就是触发filterDataList这个函数的调用方(我们自己)传递的// return state.datalist.filter(item => {//     return item.eTicketFlag === 0// })//注意上面注释代码中匿名函数item=>{return item.eTicketFlag === 0} :加了{}就需要在里面多一个returnreturn state.datalist.filter(item =>item.eTicketFlag==intParams)}}}
});export default store

main.js 注册状态管理器

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'//import store from "../src/store" //状态管理器js          注意:如果仅仅是指定了一个文件夹router,程序会自动去router文件夹下寻找index.js,并导入
//import store from "../src/store/index" //导入状态管理器js    注意:.js可以省略
//import store from "../src/store/myindex.js" //导入状态管理器js  注意:如果我们的状态管理器文件不是index.js 那么我们就得指定具体的名称了import store from "../src/store/index.js" //导入状态管理器js var app=createApp(App)app.use(store)  //注册vuex插件:状态管理器app.mount("#app")

组件中使用

<template><select v-model.number="type"><option :value="0">App订票</option> <!--:value="0" 用数据绑定的形式,则它的值是数值类型的--><option :value="1">前台兑换</option></select><div><ul><!--从store的getters中获取数据--><!-- <li v-for="item in $store.getters.filterDataList(type)" :key="item.cinemaId">{{ item.name }}</li> --><!-- 改用用辅助函数的方式:它其实就是...mapGetters(["filterDataList"]) 中展开的filterDataList方法 --><li v-for="item in filterDataList(type)" :key="item.cinemaId">{{ item.name }}</li></ul></div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {//钩子函数mounted() {//this.$store.commit("changeAppIsShow", false)代码采用辅助函数的写法:this.changeAppIsShow(false) //它其实就是...mapMutations(["changeAppIsShow", "dataListInit"]) 中展开的changeAppIsShow方法。console.log("aa",this.appIsShow);//输出:false;// if (this.$store.state.datalist.length === 0) {if (this.datalist.length === 0) {//如果数据为空,则去触发actions的中的getDataList方法,达到获取datalist数据的目的。而this.$store.state.datalist中的数据存在内容中,其他地方需要这个数据直接从内存中取,相当于有个缓存,//this.$store.dispatch("getDataList");代码改成如下辅助函数的写法this.getDataList(); //它其实就是...mapActions(["getDataList"]) 中展开的getDataList方法}},beforeUnmount() {//this.$store.commit("changeAppIsShow",false)代码采用辅助函数的写法:this.changeAppIsShow(false) //它其实就是...mapMutations(["changeAppIsShow", "dataListInit"]) 中展开的changeAppIsShow方法。},//数据data() {return {type: 0,}},//方法:vuex中的Mutations,与Actions 放到methods中进行展开methods: {...mapMutations(["changeAppIsShow", "dataListInit"]), //将store中的Mutations函数展开,在DOM中可以直接用:如changeAppIsShow(),dataListInit() 在<script>中也可以直接用:如this.changeAppIsShow(),this.dataListInit()...mapActions(["getDataList"]) //将store中的Actions函数展开,在DOM中可以直接用:如getDataList() 在<script>中也可以直接用:如this.getDataList()},//计算属性:vuex中的Getters,与State 放到computed中进行展开computed: {...mapGetters(["filterDataList"]), //将store中的Getters函数展开,在DOM中可以直接用:如filterDataList() 在<script>中也可以直接用:如this.filterDataList()...mapState(["appIsShow", "datalist"]) //将store中的State数据展开,在DOM中可以直接用:如appIsShow 在<script>中也可以直接用:如this.appIsShow()},}
</script>

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

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

相关文章

2024最新计算机设计大赛选题推荐

0 前言 比赛介绍 中国大学生计算机设计大赛是中国高等教育学会“全国普通高校大学生竞赛排行榜”竞赛之一。自2008年开赛至2019年&#xff0c;一直由教育部高校与计算机相关教指委等或独立或联合主办。2023年&#xff08;第16届&#xff09;中国大学生计算机设计大赛是由、中…

《GPT与AI助手:技术进步与就业前景》

随着人工智能的迅速发展&#xff0c;像GPT&#xff08;Generative Pre-trained Transformer&#xff09;这样的自然语言处理技术已经广泛应用于各个领域&#xff0c;各个互联网公司也纷纷推出了自己的AI助手来帮助创作、交流和解决问题。这一技术的广泛应用引发了一系列关于就业…

如何利用产品帮助中心提升用户体验

在当今竞争激烈的市场中&#xff0c;提供优秀的用户体验是吸引和保留客户的关键。而一个高效和易于使用的产品帮助中心&#xff0c;正成为越来越多企业用以提升用户体验的重要工具。产品帮助中心是一个集中的信息库&#xff0c;为用户提供关于产品功能、故障排除、常见问题解答…

Python语法基础(条件语句 循环语句 函数 切片及索引)

目录 条件语句关键字与C对照注意 循环语句while 循环语句while else 循环语句for 循环语句range() 函数 for else 循环语句循环控制语句练习&#xff1a;打印乘法表 函数函数定义及调用函数值传递和引用传递多返回值参数类型位置参数默认参数关键字参数可变数量的参数可变数量的…

oracle使用regexp_substr来拆分,CONNECT BY LEVEL查询卡死,速度慢的问题。

一、问题 oracle 使用regexp_substrCONNECT BY LEVEL来&#xff0c;根据特定字符拆分成多行。 &#xff08;注意这里我的数据是每个值都有“ ; ”&#xff0c;即使后面没有值&#xff0c;后面也会有个“ ; ”&#xff0c; 如果是正常的分隔符&#xff0c;sql 需要改成” LEVEL…

【SA8295P 源码分析】119 - QNX 中如何在代码中快速配置 TLMM_GPIO 或 PMIC_GPIO 中断 及 中断回调函数

【SA8295P 源码分析】119 - QNX 中如何在代码中快速配置 TLMM_GPIO 或 PMIC_GPIO 中断 及 中断回调函数 一、配置 TLMM GPIO15 中断示例代码二、配置 PMIC2 GPIO1 中断示例代码三、easy_irq 实现源码分析3.1 struct _easy_irq_ctx 结构体内容分析3.2 register_easy_irq_callbac…

github遇到想要强制拉取远程仓库内容

进行项目的时候&#xff0c;遇到了我的远程仓库 Sync fork 更新以后&#xff0c;这时候我的本地就和远程不同步&#xff0c;如果使用 git pull 的时候&#xff0c;如果出现 conficts 过多的情况怎么办&#xff0c;如果我们想要直接把远程仓库拉下来应该怎么办&#xff1f; git…

flink1.18.0 macos sql-client.sh启动报错

报错 Could not read from command line. Exception in thread "main" org.apache.flink.table.client.SqlClientException: Could not read from command line.at org.apache.flink.table.client.cli.CliClient.getAndExecuteStatements(CliClient.java:221)at or…

爆肝一文,走进大名鼎鼎的HTTP协议(通俗白话+三万字超详细+抓包工具使用)

文章目录 前言1. HTTP 是什么1.1 HTTP 完整请求流程1.2 理解 HTTP 协议的工作过程 2. HTTP 协议格式2.1 抓包工具的使用2.2 抓包工具的原理2.3 抓包结果2.4 协议格式总结 3. HTTP 请求(Request)3.1 认识 URL(Uniform Resource Locator)URL 基本格式关于 URL encode 3.2 认识请求…

风险风控-逻辑回归理论基础

逻辑回归一般都应用于传统的建模方案,因其模型含义易解释,容易推广上线而得到大家的青睐 逻辑回归于广义线性模型: 逻辑回归是广义线性模型(Generalized Linear Models,GLM)的一种特殊形式。广义线性模型是线性回归模型的推广,它不强行改变数据的自然度量,允许数据具…

Spring Cloud 微服务入门篇

文章目录 什么是微服务架构 Microservice微服务的发展历史微服务的定义微小的服务微服务 微服务的发展历史1. 微服务架构的发展历史2. 微服务架构的先驱 微服务架构 Microservice 的优缺点1. 微服务 e Microservice 优点2. 微服务 Microservice 缺点微服务不是银弹&#xff1a;…

【hcie-cloud】【5】华为云Stack规划设计之华为云Stack标准化配置、缩略语【下】

文章目录 前言、华为云Stack交付综述为云Stack标准组网华为云Stack标准化配置华为云Stack配置概览华为云Stack云服务全视图华为云Stack部署方案节点类型说明华为云Stack云服务组件部署场景管理节点部署原则云平台管理规格华为云Stack IaaS场景&高阶场景起步必选部署组件x86…

【Qt之元对象系统】

描述 Qt的元对象系统&#xff08;Meta-Object System&#xff09;是Qt框架的核心机制之一&#xff0c;它提供了运行时类型信息&#xff08;RTTI&#xff09;和信号与槽&#xff08;Signals and Slots&#xff09;机制的支持。元对象系统在Qt中扮演了很重要的角色&#xff0c;它…

已解决:Rust Error: the trait bound is not satisfied 问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页: &#x1f405;&#x1f43e;猫头虎的博客&#x1f390;《面试题大全专栏》 &#x1f995; 文章图文并茂&#x1f996…

Android 进阶——Binder IPC之学习Binder IPC架构及原理概述(十二)

文章大纲 引言一、Binder IPC 基础架构1、Binder IPC核心角色2、Binder IPC的数据流 二、Binder IPC 协议通信流程三、Binder IPC 核心角色详解1、Server 进程及Server 组件2、Client进程及Client组件3、Service Manager 与实名 Binder4、Binder 驱动 四、Binder 通信过程五、开…

mybatis嵌套查询子集合只有一条数据

我们再用mybatis做嵌套查询时&#xff0c;有时会遇到子集合只有1条数据的情况&#xff0c;例如下这样&#xff1a; 数据库查询结果 xml <resultMap id"userMap" type"com.springboot.demo.test.entity.User"><id column"uid" property…

Leetcode150. 逆波兰表达式求值

Every day a Leetcode 题目来源&#xff1a;150. 逆波兰表达式求值 解法1&#xff1a;栈 用栈模拟逆波兰表示法表示的算术表达式的计算过程。 初始化一个栈 stk。 遍历字符串数组 tokens&#xff0c;根据当前字符串 token 决定操作&#xff1a; 若 token 是 1 个算符&am…

基于JavaWeb+SSM+Vue微信小程序校园兼职任务平台系统的设计和实现

基于JavaWebSSMVue微信小程序校园兼职任务平台系统的设计和实现 源码传送入口前言主要技术系统设计功能截图Lun文目录订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码传送入口 前言 随着社会的发展和全球疫情的冲击&#xff0c;大学生的就业形势越来越严峻。越…

基于FPGA的模板匹配红外目标跟踪算法设计

为什么要写这篇文章 我写这篇文章的原因是一天在B站看到了一个大神发的视频是关于跟踪一个无人机的&#xff0c;看到作者跟网友的回复说是用的图像匹配算法&#xff0c;我就在网上搜索相关资料&#xff0c;最终找到一篇文献。文献中对该算法的评价很高&#xff0c;满足制导系统…

【第2章 Node.js基础】2.3 Node.js事件机制

2.3 Node.js事件机制 学习目标 &#xff08;1&#xff09;理解Node.js的事件机制&#xff1b; &#xff08;2&#xff09;掌握事件的监听与触发的用法。 文章目录 2.3 Node.js事件机制什么是事件机制为什么要有事件机制事件循环事件的监听与触发EventEmitter类常用API 什么是…