[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations

最新推荐文章于 2024-04-04 08:00:00 发布
最新推荐文章于 2024-04-04 08:00:00 发布
阅读量1.7k 收藏 11
点赞数 3
分类专栏： # vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/121301594
版权

1. mapState方法：

用于帮助我们映射state中的数据为计算属性

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

2. mapGetters方法：

用于帮助我们映射getters中的数据为计算属性

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

例子：

不用mapState,mapGetters方法，原始写
<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3>
		<h3>我在{{$store.state.school}}，学习{{$store.state.subject}}</h3>
		
	</div>
</template>

<script>
	export default {
		name:'Count',
	}
</script>

<style lang="css">

</style>

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)


//准备state——用于存储数据
const state = {
	sum:1, //当前的和
	school:'尚硅谷',
	subject:'前端'
}
//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

//创建并暴露store
export default new Vuex.Store({
	state,
	getters
})
用mapState,mapGetters方法写

count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和放大10倍为：{{bigSum}}</h3>
		<h3>我在{{school}}，学习{{subject}}</h3>
		
	</div>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			
			//借助mapState生成计算属性，从state中读取数据。（对象写法）
			// ...mapState({sum:'sum',school:'school',subject:'subject'}),

			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState(['sum','school','subject']),

		
			//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
			// ...mapGetters({bigSum:'bigSum'})
			
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters(['bigSum'])

		},
		
	}
</script>

<style lang="css">

</style>

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)


//准备state——用于存储数据
const state = {
	sum:1, //当前的和
	school:'尚硅谷',
	subject:'前端'
}
//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

//创建并暴露store
export default new Vuex.Store({
	state,
	getters
})

在这里插入图片描述

3. mapActions方法：

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

4. mapMutations方法：

用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

例子：

不用mapMutations,mapActions

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	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:1, //当前的和
}


//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<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.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
		},
		
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

在这里插入图片描述

用mapMutations,mapActions
<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<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 {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		
		methods: {
			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations({increment:'JIA',decrement:'JIAN'}),

			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
			// ...mapMutations(['JIA','JIAN']),

			/* ************************************************* */

			

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
			// ...mapActions(['jiaOdd','jiaWait'])
		},
		
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。
在这里插入图片描述

总代码：

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 {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState(['sum','school','subject']),

			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters(['bigSum'])

		},
		methods: {

			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations({increment:'JIA',decrement:'JIAN'}),
			
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

		},
		mounted() {
			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		},
	}
</script>

<style lang="css">
	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 = {

	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:'前端'
}

//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})

App.vue

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
	
	}
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

在这里插入图片描述



参考：
Vuex模块化和命名空间

533_
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3使用替换...mapAction方案
weixin_43492777的博客
08-30 1309
【代码】vue3使用替换...mapAction方案。
vue中Map对象使用总结
静心园
04-17 1万+
vue中Map对象使用总结 一般情况下List已经可以处理大部分情况下的业务，但在特殊的场景下，使用map可以节省很多的代码量，但在实践过程中如果套用list的方法去使用则会遇到很多的坑，这里对在Vue中正确使用map对象做一个整理，顺便吐槽下现在网上的文章真是质量低下，很多连js中list和map是啥就可以出来瞎写真的是误人子弟。 map的基本使用 //1.新建 var mapObject=new Map() //2.添加 mapObject.set(key,value) //如果对应的key已经存在，则
详细分析Vuex中的mapGetters
最新发布
码农研究僧的博客
04-04 2986
用 mapGetters 和 mapState，可以简化组件中对于 Vuex 中状态和 getter 的映射工作，减少了重复的代码书写
vue3.0下如何使用mapState，mapGetters和mapActions
qq_16139383的博客
08-26 1万+
vue3.0下如何使用mapState，mapGetters和mapActions1、新建useMapper.js2、新建useState.js3、新建useGetters.js4、新建useActions.js5、页面中使用 vue2.0中使用mapState及mapActions的方式 // 使用mapState computed: { ...mapState({ //... }) } methods: { ...mapActions(['fnA', 'fnB']) } vue3.
【vue】Vue中的map()用法
热门推荐
qq_44727978的博客
04-18 5万+
前台数据处理。超详细的小白教程map()
vue3+ts 使用 vuex辅助函数(mapState,mapMutations,mapGetters,mapActions) 对函数进行二次封装
HHH917的博客
03-09 6793
本文辅助函数封装是参考 深入Vue3+TypeScript技术栈-coderwhy大神新课 视频学习改的 vue2中的使用方式 ...mapState(["abc", "name"]) ...mapState({ name: state => state.name, }) ...mapGetters(["allName"]) ...mapGetters({ allAge: "main/allAge", }) ...mapMu
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
11-29
一、介绍 vuex里面的四大金刚：State， Mutations，Actions，Getters （上次记得关于vuex笔记 //...　Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一
vuex-demo:vuex中mapState、mapGetters、mapActions、mapMutations的使用
05-02
在这个"vuex-demo"项目中，我们将重点探讨Vuex中的四个核心辅助函数：`mapState`、`mapGetters`、`mapActions`和`mapMutations`，它们极大地简化了Vuex与Vue组件之间的交互。 1. **mapState** `mapState`是一个辅助...
vuex2中使用mapGetters/mapActions报错的解决方法
12-11
接着在babel的配置文件 .babelrc 中应用插件： { "presets": [ ["es2015", { "modules": false }] ], "plugins": ["transform-object-rest-spread"] } // { 　"presets": [ 　["env", { 　"modules": false, 　...
vue-vuex中使用commit提交mutation来修改state的方法详解
12-10
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 为了搞清楚其原因，查阅了很多资料，发现其它人在做vuex的源码解析的时候，并没有将这点说的很明白。 所以只好自己去查看vuex的源码，并且自己做demo进行...
vue3-vueX辅助函数
2301_80137575的博客
02-23 359
mapMutations,mapActions:必须放在methods中。mapMutations,mapActions：调用前加this。mapState,mapGetters:必须放在计算属性中。注意事项：只能在vue2版本中使用（选项式API)mapState,mapGetters：直接使用。
vue3中使用vuex
seimeii的博客
08-08 5337
vuex createStore
Vue3中如何使用vuex语法糖mapGetters，mapState，mapActions，mapMutations
类人猿
07-21 1万+
Vue3中如何使用vuex语法糖以vue3+vuex+typescript为例原来的vuex语法糖用法新的vuex语法糖用法结尾更多资料请查看 以vue3+vuex+typescript为例 我们知道，vue3的新型compositionApi非常方便，可以像react一样自定义hooks，但又比react更容易理解，那么针对setup中如何使用vuex呢？我搜寻久已都没有找到完整的说法，今天在这里小总结，希望看到的小伙伴觉得实用，感谢！！ 原来的vuex语法糖用法 直接上代码吧 import { mapS
vuex中，map的四个方法
yuroll的博客
03-21 205
用于帮助我们在组件页面中，自动生成方法，方法可以commit mutations里的JIA(){}用于帮助我们在组件页面中，自动生成方法，方法可以dispatch actions里的jia(){}用于帮助我们映射getter中的数据为计算属性，getter是对state源数据的固定计算。...mapMutations({生成方法名：‘mutations要执行的方法’})...mapActions({生成方法名：‘actions要执行的方法’})用于帮助我们映射state中的数据为计算属性。
vue3中使用Vuex
九仞山的专栏
06-11 6616
详细介绍了vue3中使用Vuex的相关特性和方法,，包括State，Getter，Mutations，Action，Module和一些辅助函数的使用方法和技巧
Vue —— 进阶 Vuex（一）（四个 map 的用法、模块化和命名空间）
HuoZhiyan 的博客
05-22 1135
文章目录一、四个 map 的用法1. mapState 方法2. mapGetters 方法实例：使用 mapState 和 mapGetters3. mapActions 方法4. mapMutations 方法实例：使用 mapActions 和 mapMutations 一、四个 map 的用法 1. mapState 方法 用于帮助我们映射 state 中的数据为计算属性 computed: { // 借助 mapState 生成计算属性：sum、school、subject (对
VUE2,VUE3中Vuex的使用详解
ICanWin_lll的博客
08-16 1648
文章目录 一、Vuex是什么 二、State 数据源 2.1 通过 this.$store.state.全局数据名称 访问 2.2 mapState 映射为计算属性 三、Mutations 变更store中的数据 3.1 this.$store.commit() 触发 mutations 3.1.1 触发 mutations 时传递值 3.2 MapMutations 映射为方法 四、Actions 专门处理异步操作 .
Vuejs学习八：map()函数
web18484626332的博客
04-11 1828
定义：map()函数定义在JS的array中，它返回一个新的数组，数组中的元素为原生数据用函数处理后的值。 map()不会对空数组进行检测；map()不会改变原始数组 let temp=[]; that.caseTagsList.map(item=>{ if(that.execParams.tagIdList.indexOf(item.id) < 0){ temp.push(item); } }); ...
Vue3中如何使用Vuex---自定义hook
D-的博客
04-25 4824
在Web实际开发中，我们经常会使用 vuex 来管理数据，随着数据量的增加，我们开始使用 vuex 中的语法糖，如 mapState、mapGetters、mapMutations 和 mapActions 等辅助函数来实现快速开发。但是Vue3中使用mapState、mapGetters这些辅助函数时会有些问题产生，本篇文章主要通过对比Vue2中vuex的使用以及分析vuex的源码，最后总结出Vue3中如何使用vuex。
mapState, mapGetters, mapActions
09-25
mapState、mapGetters和mapActions是Vue.js的Vuex库中的辅助函数，用于简化在组件中使用状态、计算属性和操作的过程。 mapState函数将Vuex中的状态映射到组件的计算属性中，使得可以通过this访问Vuex中的状态。这样可以方便地在组件中获取和使用Vuex中的数据。 mapGetters函数将Vuex中的计算属性映射到组件的计算属性中，使得可以通过this访问Vuex中的计算属性。这样可以方便地在组件中获取和使用Vuex中的计算属性的返回值。 mapActions函数将Vuex中的操作映射到组件的方法中，使得可以通过this调用Vuex中的操作。这样可以方便地在组件中触发Vuex中的操作，更新Vuex中的状态。 通过使用这些辅助函数，可以简化组件中对Vuex的引用和使用，使得代码更加简洁和易于维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值