Vue3搭建pinia环境

在Vue 3中，Pinia 是 Vuex 的后续状态管理库，旨在提供 Vuex 5 中相似的功能，但具有更简洁的API、更好的TypeScript支持和模块热重载（HMR）等特性。下面是如何在Vue 3项目中设置Pinia的步骤：

1. 创建Vue 3项目

如果你还没有一个Vue 3项目，可以使用Vue CLI或Vite来创建一个。这里以Vite为例：

npm create vite@latest my-vue-app -- --template vue 
cd my-vue-app 
npm install

2. 安装Pinia

在项目根目录下，通过npm或yarn安装Pinia：

npm install pinia 
# 或者 
yarn add pinia

3. 设置Pinia

在Vue 3项目中，你需要在创建Vue应用实例时引入并使用Pinia。

在src/main.js或src/main.ts（如果你使用的是TypeScript）中，添加以下代码来创建Pinia实例并将其作为插件添加到Vue应用中：

// src/main.js 或 src/main.ts 
import { createApp } from 'vue' 
import { createPinia } from 'pinia' 
import App from './App.vue' 


const app = createApp(App) 


// 创建Pinia实例 
const pinia = createPinia() 


// 将Pinia实例作为插件添加到Vue应用中 
app.use(pinia) 


app.mount('#app')

4. 创建并使用Store

接下来，你可以创建你的第一个Pinia store。在src/stores目录下（如果不存在，请创建它），创建一个名为useYourStore.js或useYourStore.ts的文件（将YourStore替换为你的store名称）。

// src/stores/useYourStore.js 或 src/stores/useYourStore.ts 
import { defineStore } from 'pinia' 


export const useYourStore = defineStore('yourStore', { 
state: () => ({ 
count: 0 
}), 
actions: { 
increment() { 
this.count++ 
} 
} 
})

然后，在你的组件中，你可以这样使用它：

<template> 
<div> 
<p>{{ yourStore.count }}</p> 
<button @click="increment">Increment</button> 
</div> 
</template> 


<script setup> 
import { useYourStore } from '@/stores/useYourStore' 


const yourStore = useYourStore() 


function increment() { 
yourStore.increment() 
} 
</script>

注意：在<template>中，直接访问yourStore.count需要确保你的store在组件中已正确设置并响应式更新。对于更复杂的数据或需要计算属性的情况，你可能需要使用Pinia的getters。

以上就是在Vue 3项目中设置和使用Pinia的基本步骤。Pinia的文档非常全面，你可以通过阅读Pinia官方文档来了解更多高级特性和最佳实践。