pinia 的 definestore 函数式写法是官方推荐的主流方式，用纯函数定义 store，结构清晰、类型推导友好、逻辑复用方便；它以字符串 id 和返回响应式数据的函数为参数，支持 ref/computed/组合式 api，无需 this，自动响应，按需初始化。
Pinia 的 defineStore 函数式写法是官方推荐的主流方式，它用纯函数定义 store，结构清晰、类型推导友好、逻辑复用方便，比 Options API 更现代简洁。
基础用法：定义一个简单 store
在 src/stores/counter.ts（或 .js）中：
import { defineStore } from 'pinia'
<p>export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)</p><p>function increment() {
count.value++
}
function reset() {
count.value = 0
}</p><p>return {
count,
doubleCount,
increment,
reset
}
})
</p>
✅ 关键点：
- 第一个参数是 store 的唯一 ID（用于调试和 SSR），必须是字符串
- 第二个参数是一个函数，返回所有响应式状态、计算属性和方法
- 内部可直接使用 ref、computed、onMounted 等组合式 API
如何在组件中使用这个 store
在 Vue 单文件组件中：
<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
<p>const counter = useCounterStore()
</script><p><template><div>
<p>计数：{{ counter.count }}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8748" title="vue-composition-api-best-practices"><img
src="https://img.php.cn/upload/skill/000/000/081/179222222327548.jpg" alt="vue-composition-api-best-practices" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8748" title="vue-composition-api-best-practices" class="overflowclass">vue-composition-api-best-practices</a>
<p class="overflowclass">Vue 3 组合式 API 与 <script setup> 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8748" title="vue-composition-api-best-practices" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>两倍：{{ counter.doubleCount }}</p>
<button>+1</button>
<button>重置</button>
</div>
</template></p>
⚠️ 注意：
- 不需要手动调用 counter()，useCounterStore 已是可执行函数，调用即获取 store 实例
- 所有返回的属性自动具备响应性，无需额外解构或 storeToRefs（除非需避免副作用）
进阶：支持选项式写法兼容与 TypeScript 类型
如果需要明确类型提示或兼容部分旧习惯，也可用对象形式传参（但仍是函数式风格）：
export const useUserStore = defineStore('user', {
state: () => ({
name: ref<string>(''),
age: ref<number>(0),
isLogin: ref<boolean>(false)
}),
getters: {
fullName(): string {
return this.name + '（' + this.age + '岁）'
}
},
actions: {
login(name: string, age: number) {
this.name = name
this.age = age
this.isLogin = true
}
}
})
</boolean></number></string>
? 提示：
- 这种写法本质仍是组合式 API 底层，state/getters/actions 会被自动转换为响应式逻辑
- this 指向当前 store 实例，类型由 Pinia 自动推导，TypeScript 支持完善
- 推荐优先使用纯函数式（第一种），更灵活、无 this 陷阱、便于单元测试
常见注意事项
使用 defineStore 函数式写法时要注意：
- store 文件默认不自动执行，只在首次调用
useXXXStore()时初始化，适合按需加载 - 不要在 store 函数内直接访问
this—— 函数式写法没有 this 绑定，所有数据都通过返回值暴露 - 如需跨 store 调用，可在函数体内导入其他 store 并直接使用：
const other = useOtherStore() - 若 store 中用了
onMounted等生命周期钩子，它们只在 store 被组件首次使用且该组件挂载时触发（非全局）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
