Vite-Vue/pinia-pre/src/App.vue

<template>
	<h1>Hello</h1>
	<hr />
	<button @click="onHandleSub">-</button>
	<span>{{ count }}</span>
	<button @click="onHandlePlus">+</button>
	<div class="padding-10"></div>
	<button @click="onHandleAsyncPlus">异步+</button>
	<HW />
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import useCounterStore from "./stores/counter";
import HW from "./components/HelloWorld.vue";

const store = useCounterStore();
const { count } = storeToRefs(store);
const onHandlePlus = () => {
	store.plus();
};

const onHandleSub = () => {
	store.sub();
};

const onHandleAsyncPlus = () => {
	store.asyncPlus();
};
</script>

<style scoped>
span {
	font-size: 20px;
	padding: 0 15px;
}
.padding-10 {
	padding-top: 10px;
}
</style>