Pinia通过defineStore实现模块化状态管理，按业务拆分为独立store文件（如user.ts、cart.ts），支持选项式和组合式两种定义方式，并在index.ts统一注册导出，组件中可直接引入多个store使用。
Pinia 使用 defineStore 创建模块化状态管理仓库，核心在于按业务拆分、独立定义、统一组织。每个 Store 文件只负责一块逻辑，比如用户、购物车、产品，彼此解耦，便于维护和复用。
按业务拆分多个 store 文件
在 src/store/modules/ 下为不同功能创建单独文件，例如：
-
user.ts：管理登录态、用户资料 -
cart.ts：管理购物车商品列表与操作 -
product.ts：管理商品列表、筛选与加载状态
每个文件用 defineStore 定义专属仓库，ID 必须唯一（如 'user'），函数名按惯例以 use 开头、Store 结尾：
modules/user.ts）：import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
token: null as string | null,
profile: { name: '', email: '' }
}),
getters: {
isLoggedIn: (state) => !!state.token
},
actions: {
setToken(token: string) {
this.token = token
},
clear() {
this.token = null
this.profile = { name: '', email: '' }
}
}
})
两种 defineStore 写法灵活选择
Pinia 支持选项式（Option Store）和组合式（Setup Store）两种定义方式，选哪种取决于逻辑复杂度和团队习惯：
- 选项式：结构清晰，适合状态+计算+方法关系明确的场景，写法接近 Vue 组件选项
- 组合式：更贴近 Composition API，适合需要 ref/computed/async/await 混合使用的逻辑，也方便提取可复用逻辑
modules/cart.ts）：import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useCartStore = defineStore('cart', () => {
const items = ref([] as CartItem[])
const totalCount = computed(() => items.value.reduce((sum, i) => sum + i.quantity, 0))
function addItem(item: CartItem) {
const exist = items.value.find(i => i.id === item.id)
if (exist) exist.quantity += item.quantity
else items.value.push({ ...item })
}
function removeItem(id: string) {
items.value = items.value.filter(i => i.id !== id)
}
return { items, totalCount, addItem, removeItem }
})
统一导出与注册
在 src/store/index.ts 中创建 Pinia 实例，并集中导出所有模块的 store：
import { createPinia } from 'pinia'
import { useUserStore } from './modules/user'
import { useCartStore } from './modules/cart'
import { useProductStore } from './modules/product'
const pinia = createPinia()
// 可选：挂载全局插件（如持久化、重置逻辑）
pinia.use(({ store }) => {
store.$reset = () => {
const initialState = JSON.parse(JSON.stringify(store.$state))
store.$patch(initialState)
}
})
export { useUserStore, useCartStore, useProductStore }
export default pinia
然后在 main.ts 中安装：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia()) // 或 app.use(pinia)
app.mount('#app')
组件中使用多个模块化 store
组件里可同时引入并调用多个 store，互不影响：
<script setup>
import { useUserStore } from '@/store/modules/user'
import { useCartStore } from '@/store/modules/cart'
const userStore = useUserStore()
const cartStore = useCartStore()
// 直接读取状态或调用方法
console.log(userStore.isLoggedIn)
cartStore.addItem({ id: '1', name: 'Book', quantity: 2 })
</script>
不需要手动处理命名空间或模块嵌套，每个 store 的 ID 就是天然隔离标识，DevTools 也能按名称清晰识别。
