在Vue 3, TypeScript 和 Vite 环境下，Pinia 是一个强大的状态管理库。以下是一些常用的Pinia结构和代码示例：
- 安装Pinia：
npm install pinia- 创建Pinia Store：
// store.ts
import { defineStore } from 'pinia'
export const useMainStore = defineStore({
id: 'main',
state: () => {
return { counter: 0 }
},
actions: {
increment() {
this.counter++
}
}
})- 在Vue应用中安装和使用Pinia：
// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { useMainStore } from './store'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')- 在组件中使用Pinia Store：
// MyComponent.vue
<template>
<div>{{ counter }}</div>
<button @click="increment">Increment</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useMainStore } from './store'
export default defineComponent({
setup() {
const mainStore = useMainStore()
return {
counter: mainStore.counter,
increment: mainStore.increment
}
}
})
</script>以上代码展示了如何在Vue 3, TypeScript 和 Vite 项目中使用Pinia进行状态管理。通过defineStoreAPI定义状态和动作，并在Vue应用中通过createPinia创建和安装Pinia插件。在组件中通过useMainStore函数访问状态和执行动作。