Vue3中的pinia使用（收藏版）
<template>
<div>
<p>{{ counter.value }}</p>
<button @click="counter.increment()">+</button>
<button @click="counter.decrement()">-</button>
</div>
</template>
<script setup>
import { useCounterStore } from './stores/counterStore';
// 使用pinia的store
const counter = useCounterStore();
</script>这个例子展示了如何在Vue 3应用中使用Pinia来创建和使用一个简单的计数器store。首先，在<script setup>标签中，我们导入了在counterStore.js文件中定义的useCounterStore函数。然后，我们通过调用useCounterStore来创建并获取store的实例，并将其赋值给counter变量。在模板中，我们绑定了counter.value到一个段落，并添加了两个按钮来分别调用counter.increment和counter.decrement方法来改变计数器的值。
评论已关闭