vue
/
Vue


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>vuex</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script src="../js/vue.min.js"></script>
		<script src="//cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
		<script src="//unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
	</head>

	<body>
		<div id="app">
			<p>{{ count }}</p>
			<p>
				<button @click="increment">+</button>
				<button @click="decrement">-</button>
			</p>
		</div>

	</body>
	<script type="text/javascript">
		// make sure to call Vue.use(Vuex) if using a module system

		const store = new Vuex.Store({
			state: {
				count: 0
			},
			mutations: {
				increment: state => state.count++,
				decrement: state => state.count--
			}
		})

		new Vue({
			el: '#app',
			computed: {
				count: function() {
					return store.state.count;
				}
			},
			methods: {
				increment: function() {
					store.commit('increment');
				},
				decrement: function() {
					store.commit('decrement');
				}
			}
		})
	</script>

</html>