在cursor中新建vue项目后，必须依次完成pinia安装、全局注册、定义store三步：先执行npm install pinia等命令安装依赖，再在main.ts中导入createpinia并调用app.use()注册，最后在src/stores/下创建store文件，确保state为函数且id唯一。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中新建Vue项目后，要让Pinia状态管理正常工作，必须完成安装、注册、定义Store三步，缺一不可，否则组件中调用useStore会报错“Cannot read properties of undefined”。
安装Pinia依赖
打开Cursor内置终端（Ctrl+`），确保当前路径为项目根目录，执行以下任一命令：
方法一：npm安装
npm install pinia
方法二：yarn安装
yarn add pinia
方法三：pnpm安装
pnpm add pinia
【注意】不要跳过这一步直接写store文件——没有依赖时defineStore会报ReferenceError。
全局注册Pinia实例
编辑 src/main.ts（Vue 3 + TS项目）或 src/main.js（JS项目），按顺序执行：
① 导入 createPinia：
import { createPinia } from 'pinia'
② 创建 Pinia 实例并注册到 app：
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
这一步必须放在 app.mount() 之前，否则 store 在组件 setup 中无法被正确注入。如果使用 Vite 默认模板，main.ts 中已有 createApp(App) 调用，只需在它后面插入 app.use(createPinia()) 即可。
创建第一个Store文件
在 src/stores/ 目录下新建 counter.ts（推荐TS）或 counter.js（JS）：
第一步：导入 defineStore
import { defineStore } from 'pinia'
第二步：导出命名式 store（ID 必须唯一）
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: { increment() { this.count++ } }
})
【关键点】state 必须是函数返回对象，写成 state: { count: 0 } 会导致多个组件共用同一份响应式数据，引发状态污染。
在Vue组件中使用Store
打开任意 .vue 文件（如 src/App.vue），在 <script setup> 中：</script>
导入 store：
import { useCounterStore } from '@/stores/counter'
调用 store：
const counterStore = useCounterStore()
解构使用：
const { count, increment } = storeToRefs(counterStore)
模板中绑定：
{{ count }}
这一步操作起来很简单，直接把 import 和 useCounterStore() 写进 setup 就能立刻读写状态，无需 provider 或 inject 配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
