Vue3 Pinia Setup Store 怎么写？

Question

仓乃文 · Accepted Answer

Pinia 有两种定义 Store 的方式：Options Store 和 Setup Store。Setup Store 使用组合式函数写法，ref 对应 state，computed 对应 getters，function 对应 actions，与 Composition API 风格一致，更灵活。

Setup Store 写法：
```javascript
import { defineStore } from "pinia";
import { ref, computed } from "vue";

export const useUserStore = defineStore("user", () => {
  const name = ref("");           // state
  const age = ref(0);              // state
  const isAdult = computed(() => age.value >= 18);  // getter

const setName = (newName) => {   // action
    name.value = newName;
  };
  const reset = () => {            // action
    name.value = "";
    age.value = 0;
  };

return { name, age, isAdult, setName, reset };
});
```

跨 Store 协同：
```javascript
export const useOrderStore = defineStore("order", () => {
  const userStore = useUserStore();  // 直接使用其他 Store
  const orders = ref([]);
  const fetchOrders = async () => {
    if (!userStore.name) return;
    orders.value = await api.getOrders(userStore.name);
  };
  return { orders, fetchOrders };
});
```

补充说明：
- Setup Store 比 Options Store 更灵活，可以使用任何 Composable
- $reset() 在 Setup Store 中需要手动实现（Options Store 自动有）
- SSR 时需要用函数形式返回初始值避免状态共享
- 推荐新项目使用 Setup Store，与 <script setup> 风格统一
- 不要创建一个巨大的全局 Store，按业务域拆分