Vue.js 和 Vuex 入门教程：计数器示例

日期: 2024-08-04 17:52:51

标签: 常规

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue.js 和 Vuex 计数器示例</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
	</head>
	<body>
	<div id="app">
		<button @click="increment">+</button>
		<p>{{ $store.state.count }}</p>
	</div>
	<script>
		const store = new Vuex.Store({
			state: {
				count: 0
			},
			mutations: {
				increase(state) {
					state.count++
				}
			}
		})
		var vm = new Vue({
			el: '#app',
			store,
			methods: {
				increment() {
					this.$store.commit('increase')
				}
			}
		})
<pre><code>&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</html>

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