<script setup>
import { ref } from "vue";
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();

const num = computed(() => store.state.demo.num);		// 这里的demo与store里的demo相对应
const count = ref(0);
const asyncIncrement = () => store.dispatch("asyncIncrement", count.value);
</script>

<template>
	<h1>{{ num }}</h1>
	<div class="wrap">
		<a-space>
			<a-input v-model:value="count" type="number" />
			<a-button @click="asyncIncrement" type="primary">累加</a-button>
		</a-space>
	</div>
</template>

<style scoped>
.wrap {
	display: flex;

	width: 768px;
}
.read-the-docs {
	color: #888;
}
</style>
