Vuex传递参数示例：使用store.dispatch方法

日期: 2026-10-13

标签: 常规

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vuex传递参数示例</title>
		<script src="../vue.js"></script>
		<script src="../vuex.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="param">传递参数</button>
			<p>{{this.$store.state.param}}</p>
		</div>
		<script>
			var store = new Vuex.Store({
				state: { param: '' },
				mutations: {
					receive(state, param) {
						state.param = param
					}
				},
				actions: {
					param(context) {
						context.commit('receive', '我是传递的参数')
					}
				}
			})
			var vm = new Vue({
				el: '#app',
				store,
				methods: {
					param() {
						this.$store.dispatch('param')
					}
				}
			})
		</script>
	</body>
</html>

原文地址: https://www.cveoy.top/t/topic/n8e2 著作权归作者所有。请勿转载和采集!