vue-vueX(3)-辅助函数map(mapState,mapGetters,mapActions,mapMutations)

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

vue-vueX(3)-四个map方法的使用(mapState,mapGetters,mapActions,mapMutations)

  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'])
},

  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生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

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

mapState,mapGetters的案例使用

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:'前端'
}
//准备getters——用于将state中的数据进行加工
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">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters} 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
			}, */

			//借助mapState生成计算属性，从state中读取数据。（对象写法）
			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

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

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

			/* bigSum(){
				return this.$store.getters.bigSum
			}, */

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

		},
		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)
			},
		},
		mounted() {
			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		},
	}
</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({he:'sum',xuexiao:'school',xueke:'subject'}),

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

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

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

		},
		methods: {
			//程序员亲自写方法
			/* increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			}, */

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

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

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

			//程序员亲自写方法
			/* incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			}, */

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

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
			// ...mapActions(['jiaOdd','jiaWait'])
		},
		mounted() {
			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		},
	}
</script>

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

多组件共享数据

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
	},
	ADD_PERSON(state,value){
		console.log('mutations中的ADD_PERSON被调用了')
		state.personList.unshift(value)
	}
}
//准备state——用于存储数据
const state = {
	sum:0, //当前的和
	school:'尚硅谷',
	subject:'前端',
	personList:[
		{id:'001',name:'张三'}
	]
}
//准备getters——用于将state中的数据进行加工
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:red">Count组件求和为：{{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

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和放大10倍为：{{bigSum}}</h3>
		<h3>我在{{school}}，学习{{subject}}</h3>
		<h3 style="color:red">Person组件的总人数是：{{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 {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState(['sum','school','subject','personList']),
			//借助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>
飘然渡沧海
关注
专栏目录
vuex中，map的四个方法
yuroll的博客
03-21 237
用于帮助我们在组件页面中，自动生成方法，方法可以commit mutations里的JIA(){}用于帮助我们在组件页面中，自动生成方法，方法可以dispatch actions里的jia(){}用于帮助我们映射getter中的数据为计算属性，getter是对state源数据的固定计算。...mapMutations({生成方法名：‘mutations要执行的方法’})...mapActions({生成方法名：‘actions要执行的方法’})用于帮助我们映射state中的数据为计算属性。
vuex的语法糖-辅助函数mapState , mapMutations , mapActions , mapGetters
@baby张~的博客
04-03 4729
还不知道vue中vuex如何使用？点击下面链接 链接:简单demo详细讲解 复习vuex工作原理 事件调用 dispatchstate修改 render重新渲染commit一个type类型匹配对应type操作state客户端ActionStateMutation vuex五大核心 1.State 2.Getters 3.Mutations 4.Actions 5.Module 我们项目中需要的都...
[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
qq_14993591的博客
11-13 1820
1. mapState方法： 用于帮助我们映射state中的数据为计算属性 computed: { //借助mapState生成计算属性：sum、school、subject（对象写法） ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性：sum、school、subject（数组写法） ...mapState(['sum','school','su
使用 Vue3 中的 Map 对返回结果去重
最新发布
exlink2012的专栏
08-16 262
对从后端返回的数组结果进行去重。假设你有一个数组，其中包含多个对象，每个对象都有一个唯一的。以下是一个示例，展示如何使用。在 Vue3 中，你可以使用。，并显示去重后的结果。
Vue3实践和对vuex中mapState,mapGetters辅助函数封装
monoplasty的博客
02-11 2206
1. readonly API的使用 在我们传递给其他组件数据时，如果直接将响应式数据传递给子组件。子组件如果使用数据不规范，修改了父组件传进来的props值没有任何反馈。 // 父组件 // <ReadonlyChild :info="info" /> setup() { const info = reactive({ name: "哇哈哈", }); return { info, }; } // 子组件 setup(props) {
使用Vuex辅助函数
weixin_46607967的博客
10-09 359
// vuex正常引入使用写法 <p> 购物车数量：{{$store.state.cartNum}} </p> // 辅助函数精简之后写法 <p> 购物车数量：{{cartNum}} </p> <script> // 1.导入辅助函数 import {mapState} from 'vuex' export default{ // 2.在计算属性中使用辅助函数 computed:{ ...mapState..
【Vue】vux中mapMutation的使用（Vue3）
毛毛的博客
12-15 1416
Vue3和Vue2中如何抽取vuex中mutation的内容。
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
m0_58656423的博客
05-19 2456
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
vuex-demo:vuex中mapState、mapGetters、mapActions、mapMutations的使用
05-02
在这个"vuex-demo"项目中，我们将重点探讨Vuex中的四个核心辅助函数：`mapState`、`mapGetters`、`mapActions`和`mapMutations`，它们极大地简化了Vuex与Vue组件之间的交互。 1. **mapState** `mapState`是一个辅助...
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
12-09
在微信小程序开发中，开发者常会遇到一个问题：在使用mpvue和vuex的组合时，vuex的辅助函数如mapState、mapGetters、mapMutations和mapActions无法正常工作。这个问题主要是由于mpvue框架与vue-cli + vuex项目的集成...
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
11-29
然后在你的 Vue 组件中，可以使用 `mapState`, `mapGetters`, `mapActions` 和 `mapMutations` 辅助函数来简化访问和操作 State、Getters、Actions 和 Mutations。这些辅助函数可以让你在组件内便捷地绑定 Store 中...
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题.doc
05-18
总结来说，解决mpvue + vuex开发微信小程序时，vuex辅助函数无法使用的问题，关键在于理解mpvue的特性和vue的原型链机制，通过在Vue原型上添加$store属性，确保子组件能正确访问store，从而使mapState、mapGetters等...
Vuex 4源码学习笔记 - mapState、mapGetters、mapActions、mapMutations辅助函数原理（六）
小帅的编程笔记
11-24 1338
在上一篇笔记中：Vuex 4源码学习笔记 - 通过dispatch一步步来掌握Vuex整个数据流（五） 我们通过dispatch的调用，一步步的看到Vuex的内部工作流程，这也是看源码的最好的方式，只要捋清楚大概主流程后，再去看那些细枝末节就容易多了。 今天我们就来看看这几个Vuex的辅助函数，分别为mapState、mapGetters、mapActions、mapMutations、createNamespacedHelpers，从名字看到，它们是辅助函数，意思就是，不用它们我们也可以使用Vuex，使用
vue的四个map方法的使用
qq_63656102的博客
04-24 1916
在使用这四个map之前必须先导入对应的vuex插件：computed:{//计算属性},这样做后HTML上就只用写一个sum就可以了,简化了代码第二个是mapGetters，他可以更新getters值，用法和mapState是差不多一样的，我这里就不展示了第三个是mapActions，可以生成与actions对话的方法methods:{// add(){// }},第四个是mapMutations，用法和mapActions是一样的掌握四个map可以大大提高编码效率。
深入理解 Vue 3 响应性原理 -- Set/Map/WeakMap 函数
BG的博客
04-30 1323
介绍 接着 << 深入理解 Vue 3 响应性原理 — Proxy >> 开始了解 WeakMap、Map、Set 函数 例子 这是每个函数,在new之后,在控制台中打印的结果 set函数里边存储的是,类似数值一样的集合 map里边存的有 key, 和 value,不同的是,key 是对象类型 weakMap 存储形式和 map 一样 Set 对象允许你存储任何类型的唯一值 特点: Set对象是值的集合 按照插入的顺序迭代它的元素 Set中的元素只会出现一次,即Set中的元素是唯
vuex中的四个map方法的使用
见证自己学习,成长的记录
07-07 4978
用于帮助我们映射state中的数据为计算属性//借助mapState生成计算属性：sum、school、subject（对象写法）//借助mapState生成计算属性：sum、school、subject（数组写法）},用于帮助我们映射getters中的数据为计算属性//借助mapGetters生成计算属性：bigSum（对象写法）//借助mapGetters生成计算属性：bigSum（数组写法）},3用于帮助我们生成与actions对话的方法，即：包含的函数methods:{
Vue学习第25天——Vuex中的4个map方法的基本用法及案例练习
背心的博客
09-18 3665
VUEX中的mapState、mapGetters、mapActions和mapMutations详解及案例练习
VUE3.0,DAY59，vuex的mapState、mapGetters、mapActions、mapMutations
疯子的梦想@的博客
09-17 674
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
vue3中使用vuex
seimeii的博客
08-08 5355
vuex createStore
vue-vuex详解
11-18
Vue.js是一个流行的JavaScript框架，它允许您构建动态Web应用程序。Vuex是一个专为Vue.js应用程序开发的状态管理模式。它允许您在应用程序中管理和维护状态，例如用户信息、购物车、主题等。Vuex将状态存储在一个集中的存储库中，称为store。Vuex的核心概念包括state、mutations、actions和getters。 - state：存储应用程序级别的状态，可以通过store.state访问。 - mutations：用于更改状态的函数，必须是同步函数。可以通过store.commit方法调用。 - actions：用于处理异步操作的函数，可以包含任意异步操作。可以通过store.dispatch方法调用。 - getters：用于从store中获取状态的函数，可以通过store.getters访问。 下面是一个简单的示例，演示如何在Vue.js应用程序中使用Vuex： 1.安装Vuex ```shell npm install vuex --save ``` 2.创建store ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount: state => { return state.count } } }) export default store ``` 3.在Vue组件中使用store ```javascript <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="incrementAsync">Increment Async</button> </div> </template> <script> import { mapGetters, mapActions } from 'vuex' export default { computed: { ...mapGetters([ 'getCount' ]) }, methods: { ...mapActions([ 'increment', 'incrementAsync' ]) } } </script> ``` 在上面的示例中，我们创建了一个名为count的状态，并定义了一个名为increment的mutation和一个名为incrementAsync的action。我们还定义了一个名为getCount的getter，用于从store中获取count状态。在Vue组件中，我们使用mapGetters和mapActions帮助程序将getter和action映射到组件中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值