pinialisted
Install: claude install-skill CloudyWing/ai-dotfiles
# Pinia 狀態管理規範
## Store 設計原則（Crucial）
### Setup Store 優先
**必須**使用 Setup Store（函式寫法），與 Composition API 風格一致，型別推斷更佳。
```typescript
// stores/order.ts
import { ref, computed } from 'vue';
import { defineStore } from 'pinia';
import type { Order } from '@/types/order';
import { orderApi } from '@/api/order';
export const useOrderStore = defineStore('order', () => {
// State
const orders = ref<Order[]>([]);
const isLoading = ref(false);
const error = ref<string | null>(null);
// Getters
const pendingOrders = computed(() =>
orders.value.filter(o => o.status === 'pending')
);
const orderCount = computed(() => orders.value.length);
// Actions
async function fetchOrders() {
isLoading.value = true;
error.value = null;
try {
orders.value = await orderApi.getAll();
} catch (e) {
error.value = e instanceof Error ? e.message : '載入失敗';
throw e;
} finally {
isLoading.value = false;
}
}
async function createOrder(input: CreateOrderInput) {
const newOrder = await orderApi.create(input);
orders.value.push(newOrder);
return newOrder;
}
function $reset() {
orders.value = [];
isLoading.value = false;
error.value = null;
}
return {
// State
orders,
isLoading,
error,
// Getters
pendingOrders,
orderCount,
// Actions
fetchOrders,
createOrder,
$reset
};
});
```
### Options Store（僅限既有專案）
若專案既有 Store 皆為 Options 風格，新增 Store 可沿用。不在同一專案中混用。
``