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

最新推荐文章于 2024-10-12 10:41:56 发布
最新推荐文章于 2024-10-12 10:41:56 发布
阅读量211 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76386566/article/details/133769133
版权

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 = false



new 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中最为核心的store

import 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中最为核心的store

import 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中最为核心的store

import 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，getters，mapState，mapGetters，mapActions，mapMutations，多组件共享数据，vuex模块化
qq_45994446的博客
10-10 246
vuex在Vue中实现集中式状态（数据）管理的一个vue插件，集中式就像一个老师给一群学生上课，状态就是数据；vuex对vue应用中多个组件的共享数据进行集中式的管理（读、写），适用于任意组件间通信多个组件依赖于同一状态时；来自不同组件的行为需要变更同一状态（数据）
【笔记整理】vuex介绍和原理以及mapState与mapGetters、mapActions与mapMutations
fangyuan__的博客
07-30 658
vuex介绍和原理以及mapState与mapGetters、mapActions与mapMutations
《进阶篇第9章》学习vuex知识点后练习：把求和案例改成mapState与mapGetters
刘大猫
06-27 175
《进阶篇第9章》学习vuex知识点后练习：把求和案例改成mapState与mapGetters
Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
小飞的博客
02-15 1182
vuex插件，状态（数据）共享
Vuex_getters_mapState_mapGetters_mapMutations_mapActions
lyxzmlmy的博客
03-20 827
mapState, mapGetters, mapMutations, mapActions
VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）
醉瑾_的博客
02-10 856
VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码） 一、Vuex普通实现求和案例 演示 实现 1、引入Vuex（store文件下index.js） //该文件用于创建Vuex中最为核心的store import Vue from "vue"; /* 此处不写在App.vue中的原因 是因为应该先Vue.use(Vuex)再创建store实列对象 但是es6规定import语句先执行，
理解Vuex，搭建Vuex环境，getters配置项、(mapState、mapGetters、mapActions、mapMutations)的使用、vuex模块化+命名空间、求和案例——Vuex
weixin_70320000的博客
03-17 1726
理解Vuex，搭建Vuex环境，getters配置项、(mapState、mapGetters、mapActions、mapMutations)的使用、vuex模块化+命名空间、求和案例——Vuex
VUE3.0,DAY59，vuex的mapState、mapGetters、mapActions、mapMutations
疯子的梦想@的博客
09-17 678
VUE3.0,DAY59mapState和mapGetters案例说明mapActions和mapMutations小结 mapState和mapGetters 案例说明 我们使用求和案例，新加一个10倍求和的功能，其中mapstate和mapgetters起到帮我们取数据的作用。 //index.vue的代码 //该文件创建vuex中最为核心的store，为了管理vuex工作原理中的actions、mutations、state //引入vue import Vue from 'vue' //引入vue
Vuex_mapState_mapGetters_mapActions_mapMutations_简易求和案例—对Count组件进行修改
liaoai的博客
03-12 545
文章目录1.`mapState`1）对象写法2）数组写法2.`mapGetters`1）对象写法2）数组写法3.`mapActions`1）对象写法2）数组写法4.`mapMutations`1）对象写法2）数组写法求和案例（Count组件） 1.mapState 映射state中的数据为计算属性 1）对象写法 ...mapState({sum:'sum',school:'school',subject:'subject'}), 2）数组写法 ...mapState(['sum','school','su
113_Vuex中的mapActions与mapMutations方法
述安的博客
12-06 311
mapActions方法用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数 mapMutations方法用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数 备注：mapActions与mapMutations使用时，若需要传递参数则需要在模板中绑定事件时传递好参数，否则默认参数是事件对象。 求和案例完整代码_mapActions与mapMutationsmain.jsstore文件夹下的index.jsApp.
mapState mapGetters
HeX_7的博客
06-23 620
求和案例_mapState mapGetters mapMutations mapActions
Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】
不爱吃菜的菜菜的博客
07-23 699
概念专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。Github地址https。.........
vue中的一个重要插件——vuex
weixin_46376652的博客
07-20 2046
概念专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通讯方式，且适用于任意组件间通讯；
Vue学习（二十）vuex
qq_29107721的博客
06-29 377
专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信方式，并且适用于任意组件简单通信。
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 260
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
腾讯IM SDK：TUIKit发送多张图片
q1003675852的博客
10-09 346
本文记录腾讯IM SDK：TUIKit发送多张图片的实现方法
前端基础面试题·第四篇——Vue（其二）
2301_76380626的博客
10-08 1060
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
最新发布
Mr. Zhang Xiaojian's Blog
10-12 378
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
java stream分组求和案例
07-11
下面是一个使用Java Stream进行分组求和的例子： ```java import java.util.Arrays; import java.util.List; import java.util.Map; import java.util.stream.Collectors; public class GroupingAndSummingExample { public static void main(String[] args) { // 创建一个包含多个学生的列表 List<Student> students = Arrays.asList( new Student("Alice", "Math", 85), new Student("Bob", "English", 75), new Student("Alice", "English", 90), new Student("Bob", "Math", 80), new Student("Charlie", "Math", 95) ); // 使用Stream进行分组求和 Map<String, Integer> sumByStudent = students.stream() .collect(Collectors.groupingBy(Student::getName, Collectors.summingInt(Student::getScore))); // 打印每个学生的总分 sumByStudent.forEach((name, totalScore) -> System.out.println(name + ": " + totalScore)); } static class Student { private String name; private String subject; private int score; public Student(String name, String subject, int score) { this.name = name; this.subject = subject; this.score = score; } public String getName() { return name; } public String getSubject() { return subject; } public int getScore() { return score; } } } ``` 上述例子中，我们创建了一个包含多个学生的列表。然后使用Stream的`groupingBy`方法对学生进行分组，按照学生名字进行分组，并通过`summingInt`方法对每个分组中的学生成绩进行求和。最后，我们遍历结果Map，打印每个学生的总分。 运行上述代码，将会输出： ``` Alice: 175 Bob: 155 Charlie: 95 ``` 可以看到，学生Alice的总分是175，学生Bob的总分是155，学生Charlie的总分是95。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值