当前位置: 首页 > news >正文

vuex的求和案例和mapstate,mapmutations,mapgetters

main.js

import Vue from 'vue'
import App from './App.vue'
//引入vuex
import Vuex from 'vuex'
//引入store
import store from './store/index'Vue.config.productionTip = falsenew Vue({el:"#app",render: h => h(App),store,beforeCreate(){Vue.prototype.$bus = this}
})

App.vue

<template><div class="container"><Count/></div>
</template><script>import Count from './components/Count'export default {name:'App',components:{Count},mounted(){console.log('App',this)}}
</script>

count.vue

<template><div><h1>当前求和为:{{$store.state.sum}}</h1><h3>当前求和放大10倍为;{{$store.getters.bigSum}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.dispatch('jia',this.n)},decrement(){this.$store.dispatch('jian',this.n)},incrementOdd(){this.$store.dispatch('jiaOdd',this.n)},incrementWait(){this.$store.dispatch('jiaWait',this.n)	},},mounted(){console.log('Count',this.$store)}}
</script><style>button{margin-left: 5px;}
</style>

store/index.js

//该文件用于创建VUex中最为核心的storeimport Vue from 'vue'//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)//准备actions -用于响应组件中的动作
const actions ={jia(context,value){console.log('actions中的jia被调用了')context.commit('JIA',value)},jian(context,value){console.log('actions中的jian被调用了')context.commit('JIAN',value)},jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)} },jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(() => {context.commit('JIA',value)}, 500);}
}//准备mutations -用于操作数据(state)
const mutations={JIA(state,value){console.log('mutations中的JIA被调用了')state.sum +=value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -=value},
}//准备state -用于存储数据
const state ={sum:0 //当前的和 
}//准备getters--用于将state中的数据进行加工
const getters={bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})

getters配置项

当一部分的数据进行一些变化时,可以通过getters的属性来对一部分的数据进行变化

mapState,mapGetters

// sum(){// 	return this.$store.state.sum// },// school(){// 	return this.$store.state.school// },// subject(){// 	return this.$store.state.subject// },// bigSum(){// 	return this.$store.getters.bigSum// },//借助mapState生成计算属性,从state读取数据(对象写法)//  ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})//借助mapState生成计算属性,从state中读取数据(数组写法)...mapState(['sum','school','subject']),...mapGetters(['bigSum'])

通过计算属性来改变。

mapMutations

在methods方法下

            // increment(){// 	this.$store.commit('JIA',this.n)// },// decrement(){// 	this.$store.commit('JIAN',this.n)// },//借助mapMutations生成对应的方法,方法中会调用commit去联系mutaions...mapMutations({increment:'JIA',decrement:'JIAN'}),

使用之后的整个代码

main.js和App.vue时不变的

index.js

//该文件用于创建VUex中最为核心的storeimport Vue from 'vue'//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)//准备actions -用于响应组件中的动作
const actions ={jia(context,value){console.log('actions中的jia被调用了')context.commit('JIA',value)},jian(context,value){console.log('actions中的jian被调用了')context.commit('JIAN',value)},jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)} },jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(() => {context.commit('JIA',value)}, 500);}
}//准备mutations -用于操作数据(state)
const mutations={JIA(state,value){console.log('mutations中的JIA被调用了')state.sum +=value},JIAN(state,value){console.log('mutations中的JIAN被调用勒')state.sum -=value}}//准备state -用于存储数据
const state ={sum:0, //当前的和 school:'尚硅谷',subject:'前端'
}const getters={bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})

count.vue

<template><div><h1>当前求和为:{{sum}}</h1><h3>当前求和放大10倍为:{{bigSum}}</h3><h3>我在{{school}} 学习{{subject}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},computed:{// sum(){// 	return this.$store.state.sum// },// school(){// 	return this.$store.state.school// },// subject(){// 	return this.$store.state.subject// },// bigSum(){// 	return this.$store.getters.bigSum// },//借助mapState生成计算属性,从state读取数据(对象写法)//  ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})//借助mapState生成计算属性,从state中读取数据(数组写法)...mapState(['sum','school','subject']),...mapGetters(['bigSum'])},methods: {// increment(){// 	this.$store.commit('JIA',this.n)// },// decrement(){// 	this.$store.commit('JIAN',this.n)// },//借助mapMutations生成对应的方法,方法中会调用commit去联系mutaions...mapMutations({increment:'JIA',decrement:'JIAN'}),// incrementOdd(){// 		this.$store.dispatch('jiaOdd',this.n)// },// incrementWait(){// 		this.$store.dispatch('jiaWait',this.n)	// },//...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})},mounted(){const x =mapState({he:'sum',xuexiao:'school',xueke:'subject'})console.log(x)}}
</script><style>button{margin-left: 5px;}
</style>

多组件共享数据

即以index.js中的属性为公共汽车。来通过调用其中的属性来实现一个数据间的共享

index.js(这个区域主要是添加了增加人员的方法,在mutations处)

//该文件用于创建VUex中最为核心的storeimport Vue from 'vue'//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)//准备actions -用于响应组件中的动作
const actions ={jia(context,value){console.log('actions中的jia被调用了')context.commit('JIA',value)},jian(context,value){console.log('actions中的jian被调用了')context.commit('JIAN',value)},jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)} },jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(() => {context.commit('JIA',value)}, 500);}
}//准备mutations -用于操作数据(state)
const mutations={JIA(state,value){console.log('mutations中的JIA被调用了')state.sum +=value},JIAN(state,value){console.log('mutations中的JIAN被调用勒')state.sum -=value},ADD_PERSON(state,value){console.log('mutations中的ADD_PERSON被调用勒')state.personList.unshift(value)}}//准备state -用于存储数据
const state ={sum:0, //当前的和 school:'尚硅谷',subject:'前端',personList:[{id:'001',name:'张三'}]
}const getters={bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})

Person.vue

<template><div><h1>人员列表</h1><h3 style="color:blue">上方组件的求和为{{sum}}</h3><input type="text" placeholder="请输入名字" v-model="name"><button @click="add">添加</button><ul><li v-for="p in personList" :key="p.id">{{p.name}}</li></ul></div>
</template><script>
import { nanoid } from 'nanoid'export default {name:'Person',data(){return{name:''}},computed:{personList(){return this.$store.state.personList},sum(){return this.$store.state.sum}},methods:{add(){const personObj={id:nanoid(),name:this.name}this.$store.commit('ADD_PERSON',personObj)this.name=''}}
}
</script>

count.vue(这里主要是在mapstate属性中添加我要获取的personList,然后在展示处展示)

<template><div><h1>当前求和为:{{sum}}</h1><h3>当前求和放大10倍为:{{bigSum}}</h3><h3>我在{{school}} 学习{{subject}}</h3><h3 style="color:red">下方组件的总人数是:{{personList.length}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},computed:{// sum(){// 	return this.$store.state.sum// },// school(){// 	return this.$store.state.school// },// subject(){// 	return this.$store.state.subject// },// bigSum(){// 	return this.$store.getters.bigSum// },//借助mapState生成计算属性,从state读取数据(对象写法)//  ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})//借助mapState生成计算属性,从state中读取数据(数组写法)...mapState(['sum','school','subject','personList']),...mapGetters(['bigSum'])},methods: {// increment(){// 	this.$store.commit('JIA',this.n)// },// decrement(){// 	this.$store.commit('JIAN',this.n)// },//借助mapMutations生成对应的方法,方法中会调用commit去联系mutaions...mapMutations({increment:'JIA',decrement:'JIAN'}),// incrementOdd(){// 		this.$store.dispatch('jiaOdd',this.n)// },// incrementWait(){// 		this.$store.dispatch('jiaWait',this.n)	// },//...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})},mounted(){const x =mapState({he:'sum',xuexiao:'school',xueke:'subject'})console.log(x)}}
</script><style>button{margin-left: 5px;}
</style>

相关文章:

vuex的求和案例和mapstate,mapmutations,mapgetters

main.js import Vue from vue import App from ./App.vue //引入vuex import Vuex from vuex //引入store import store from ./store/indexVue.config.productionTip falsenew Vue({el:"#app",render: h > h(App),store,beforeCreate(){Vue.prototype.$bus th…...

Docker 网络访问原理解密

How Container Networking Works: Practical Explanation 这篇文章讲得非常棒&#xff0c;把docker network讲得非常清晰。 分为三个部分&#xff1a; 1&#xff09;docker 内部容器互联。 2&#xff09;docker 容器 访问 外部root 网络空间。 3&#xff09;外部网络空间…...

统信UOS离线安装nginx

注意&#xff1a;安装之前一定要切换到开发者模式&#xff0c;不然会提示没有权限 1 安装所依赖的包 gcc gcc-c openssl PCRE zlib 我平时有一个gcc的包&#xff0c;我会直接把里面的包全部安装一遍,下面是地址 链接: https://pan.baidu.com/s/1Ty35uQx_7iliduohkuNWPQ?pw…...

机器学习基础-手写数字识别

手写数字识别&#xff0c;计算机视觉领域的Hello World利用MNIST数据集&#xff0c;55000训练集&#xff0c;5000验证集。Pytorch实现神经网络手写数字识别感知机与神经元、权重和偏置、神经网络、输入层、隐藏层、输出层mac gpu的使用本节就是对Pytorch可以做的事情有个直观的…...

idea 插件推荐(持续更新)

文章目录 Material Theme UIcodeium(建议有梯子的使用)Key Promoter XCodeGlanceRainbow BracketsMarkdown NavigatorRestfulToolkitString Manipulation Material Theme UI 谁不想拥有一款狂拽炫酷 吊炸天 的编码主题呢,给你推荐Material Theme UI Plugin Material Theme UI是…...

实现Promise所有核心功能和方法

一直以来对Promise只是会用简单的方法&#xff0c;例如then&#xff0c;catch等&#xff0c;对于其余各种方法也只是简单了解&#xff0c;这次想要通过实现Promise来加深对Promise的使用 话不多说&#xff0c;直接开始&#xff0c;简单粗暴一步步来 一&#xff1a;了解Promise …...

学习总结1

Vue的学习 Vue是一套用于构建用户界面的渐进式JavaScript框架&#xff1b; Vue中关键的几个概念&#xff1a;组件化&#xff0c;MVVM&#xff0c;响应式&#xff0c;和生命周期。 1. 组件化&#xff1a; 在Vue框架中&#xff0c;允许你将界面拆分为小的&#xff0c;独立的可…...

使用 Apache Camel 和 Quarkus 的微服务(二)

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 在本系列的第一部分&#xff0c;我们看到了一个简化版的基于微服务的转账应用程序&#xff0c;该应用程序使用Apache Camel和AWS SDK&#xff08;软件开发套件&#xf…...

pid-limit参数实验

fork炸弹命令 :(){ :|:& };: 可以看到&#xff0c;如果docker没有限制&#xff0c;会遭到fork炸弹恶意 参考 https://www.cyberciti.biz/faq/understanding-bash-fork-bomb/...

jvm--执行引擎

文章目录 1. 执行引擎的工作流程2. 解释器、JIT及时编译器3. 热点代码及探测技术4. HotSpotVM 中 JIT 分类 执行引擎属于 JVM 的下层&#xff0c;里面包括解释器、及时编译器、垃圾回收器 JVM 的主要任务是负责 装载字节码到其内部&#xff0c;但字节码并不能够直接运行在操作…...

day13|二叉树理论

一、二叉树的定义 //定义一个二叉树&#xff1a;使用链式存储 public class TreeNode {int val; // 节点的值TreeNode left; // 左子节点TreeNode right; // 右子节点public TreeNode() {}// 构造函数&#xff0c;初始化节点值public TreeNode(int val){this.valval;}// 构造函…...

php+html+js+ajax实现文件上传

phphtmljsajax实现文件上传 目录 一、表单单文件上传 1、上传页面 2、接受文件上传php 二、表单多文件上传 1、上传页面 2、接受文件上传php 三、表单异步xhr文件上传 1、上传页面 2、接受文件上传php 四、表单异步ajax文件上传 1、上传页面 2、接受文件上传ph…...

日期时间参数,格式配置(SpringBoot)

介绍 在SpringBoot项目中&#xff0c;接口中的日期和时间类型的参数&#xff0c;配置格式。 日期格式 接口中常用的日期时间格式有两种&#xff1a; 字符串&#xff08;比如&#xff1a;yyyy-MM-dd HH:mm:ss&#xff09;时间戳&#xff08;比如&#xff1a;1696839876955&a…...

JAVA 泛型的定义以及使用

泛型类 /*** <T> 为该类定义泛型&#xff0c;可以是一个或多个<T,...>* 定义的泛型可以在类中作为&#xff1a;* 类变量类型&#xff1a; T data* 类方法的入参以及返回类型 public void setData(T data)&#xff0c;public T getData();次数以set&a…...

Day-08 基于 Docker安装 Nginx 镜像-负载均衡

1、反向代理后&#xff0c;自然而然就引出了负载均衡,下面简单实现负载均衡的效果; 2、实现该效果需要再添加一个 Nginx &#xff0c;所以要增加一个文件夹。 /home|---mutou|----nginx|----conf.d|----html|----conf.d2|----html3 1.创建 html3 文件夹&#xff0c; 新建 index…...

3、在 CentOS 8 系统上安装 PostgreSQL 15.4

PostgreSQL&#xff0c;作为一款备受欢迎的开源关系数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;已经存在了三十多年的历史。它提供了SQL语言支持&#xff0c;用于管理数据库和执行CRUD操作&#xff08;创建、读取、更新、删除&#xff09;。 由于其卓越的健壮性…...

sap 一次性供应商 供应商账户组 临时供应商 <转载>

原文链接&#xff1a;https://blog.csdn.net/xianshengsun/article/details/132620593 sap中有一次性供应商这个名词&#xff0c;一次性供应商和非一次性供应商又有什么区别呢&#xff1f; 有如何区分一次性供应商和非一次性供应商呢&#xff1f; 1 区分一次性供应商和非一次性…...

总结html5中常见的选择器

HTML5并没有引入新的选择器类型&#xff0c;它仍然使用CSS选择器来选择和操作HTML元素。HTML5中仍然可以使用CSS2和CSS3中定义的各种选择器。以下是HTML5中常见的选择器类型&#xff1a; 1. 元素选择器&#xff08;Element Selector&#xff09;&#xff1a;使用元素名称作为选…...

Java基础面试-JDK JRE JVM

详细解释 JDK&#xff08;Java Devalpment Kit&#xff09;java 开发工具 JDK是Java开发工具包&#xff0c;它是Java开发者用于编写、编译、调试和运行Java程序的核心组件。JDK包含了Java编程语言的开发工具和工具集&#xff0c;以及Java标准库和其他一些必要的文件。JDK中的…...

OpenCV实现图像傅里叶变换

傅里叶变换 dftcv.dft(img_float32,flagscv.DFT_COMPLEX_OUTPUT): flags:标志位&#xff0c;指定变换类型&#xff0c;cv.DFT_COMPLEX_OUTPUT会返回复数结果。 傅立叶变换&#xff0c;将输入的图像从空间域转换到频率域。 返回结果: 此函数返回一个复杂数值数组&#xff0c…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...