vuevite、pinia 快速入门

<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useStore } from 'pinia';
import { mainStore } from '../stores/mainStore';
 
// 使用Vue3的ref定义响应式数据
const msg = ref('Hello Pinia');
 
// 使用Pinia的state
const store = useStore(mainStore);
const count = computed(() => store.count);
 
// 使用Pinia的action
function increment() {
  store.increment();
}
</script>

在这个例子中，我们创建了一个简单的Vue 3应用程序，使用Vite作为构建工具和Pinia作为状态管理库。我们定义了一个响应式数据msg和使用了Pinia的状态count和动作increment。这个例子展示了如何在Vue 3项目中集成Pinia，并且如何定义响应式数据和使用Pinia中的状态和动作。