vuex中调用mutations的两种方法

最新推荐文章于 2024-09-16 00:45:16 发布

从未转生的史莱姆

最新推荐文章于 2024-09-16 00:45:16 发布

阅读量1.9k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/SYQ15544423296/article/details/132846993

版权

本文介绍了如何在Vue.js项目中使用Vuex进行状态管理，包括在Vuex中定义state和mutations，以及在组件中通过$store.commit()调用mutation更新状态。同时提到了使用mapMutations简化组件与mutations交互的方法。

摘要由CSDN通过智能技术生成

原文链接：https://blog.csdn.net/CSDN_go_die/article/details/121425066

方法一：

1.现在我们的vuex里面定义了state和mutations

  state: {
	  count:0,
  },
  mutations: {
	  add(state,step){//state是第一个参数必须有，step是自定义的参数
		  state.count += step 
	  },
  },

2.想要在组件里面修改count的值，不可以直接进行修改，要调用mutations来修改

组件A中的代码：

按钮button绑定了addButtion事件，在事件中调用了mutations，格式是

this.$store.commit('xxx',aaa) xxx是在mutations里面定义的方法,aaa是在state后面定义的参数

<template>
	<div class="add">
		我是加法：{{$store.state.count}}
		<button type="button" @click="addButton()">+1</button>
	</div>
</template>
 
<script>
	export default{
		methods:{
			addButton(){
				this.$store.commit('add',3)//这里的step就是3
			}
		},
	}
</script>

方法二:

1.在组件里引入mapMutations

	import { mapMutations } from 'vuex'

2.在vuex中定义mutations和方法一样：

  state: {
	  count:0,
  },
  mutations: {
	  add(state,step){//state是第一个参数必须有，step是自定义的参数
		  state.count += step 
	  },
  },

3.在组件里的methods引入mutations

<template>
	<div class="sub">
		我是减法：{{count}}
		<button type="button" @click="buttonSub()">-N</button>
	</div>
</template>
 
<script>
	import {mapState, mapMutations} from 'vuex'
	export default {
		methods:{
			...mapMutations(['sub']),//  <<------------在这里引入mapMutations
		},
	}
</script>

4.用this.xxx调用mutaions里面定义的xxx方法，参数写在括号里

<template>
	<div class="sub">
		我是减法：{{count}}
		<button type="button" @click="buttonSub()">-N</button>
	</div>
</template>
 
<script>
	import {mapState, mapMutations} from 'vuex'
	export default {
		computed:{
			...mapState(['count'])
		},
		methods:{
			...mapMutations(['sub']),
			buttonSub(){
				this.sub(3)//括号里写参数 <<------在这里调用sub函数
			}
		},
	}
</script>