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

2023-10-11 18:12
文章标签 案例 求和 vuex mapstate mapmutations mapgetters

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/189915。

相关文章

使用Navicat工具比对两个数据库所有表结构的差异案例详解

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》：本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较：二、开始比较总结概要公司存在多
阅读更多...
SpringBoot实现动态插拔的AOP的完整案例

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程（AOP）是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插
阅读更多...
Golang操作DuckDB实战案例分享

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck
阅读更多...
MySQL不使用子查询的原因及优化案例

MySQL不使用子查询的原因及优化案例

《MySQL不使用子查询的原因及优化案例》对于mysql,不推荐使用子查询,效率太差,执行子查询时,MYSQL需要创建临时表,查询完毕后再删除这些临时表,所以,子查询的速度会受到一定的影响,本文给大家... 目录不推荐使用子查询和JOIN的原因解决方案优化案例案例1：查询所有有库存的商品信息案例2：使用EX
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善，其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性， 将与教育相关的数据要素在区块链上进行存证确权，在确保数据可信的前提下，促进教育的公平、透明、开放，为教育教学质量提升赋能，实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护，支撑教育资源共享、教学质量评估、
阅读更多...
客户案例：安全海外中继助力知名家电企业化解海外通邮困境

客户案例：安全海外中继助力知名家电企业化解海外通邮困境

1、客户背景 广东格兰仕集团有限公司（以下简称“格兰仕”），成立于1978年，是中国家电行业的领军企业之一。作为全球最大的微波炉生产基地，格兰仕拥有多项国际领先的家电制造技术，连续多年位列中国家电出口前列。格兰仕不仅注重业务的全球拓展，更重视业务流程的高效与顺畅，以确保在国际舞台上的竞争力。 2、需求痛点 随着格兰仕全球化战略的深入实施，其海外业务快速增长，电子邮件成为了关键的沟通工具。
阅读更多...
【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展，越来越多的企业开始将其应用于实际业务中。然而，区块链技术的专业性使得其集成开发成为一项挑战。针对此，广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术，提供一套全面的区块链开发工具和开发环境，支持开发者快速开发和部署区块链应用。此外，该平台还可以提供一套全面的区块链开发教程和文档，帮助开发者快速上手区块链开发。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2