第八章：composables —— 栏目工具箱，不是新的状态黑洞 - 现代前后端完全指南：软件城市宇宙

Nuxt 官方文档里，app/composables/ 用来自动导入 Vue composables。

最简单的例子：

// app/composables/useBroadcastTheme.ts
export const useBroadcastTheme = () => {
  return useState('broadcast-theme', () => 'news')
}

页面里直接使用：

vue

<script setup lang="ts">
const theme = useBroadcastTheme()
</script>

<template>
  <div>当前频道风格：{{ theme }}</div>
</template>

也可以默认导出：

// app/composables/useAudience.ts
export default function () {
  return useState('audience', () => 0)
}

然后直接：

const audience = useAudience()

#1. 它解决什么问题？

当多个页面、多个组件都在重复写：

某段请求逻辑
某段状态逻辑
某段副作用逻辑
某段 UI 行为逻辑

就应该抽进 composable。

#2. 它不是什么？

它不是“所有东西都往里塞”的抽屉。

错误心智：

text

业务逻辑一多
→ 全扔进 composables
→ 最后谁也不知道状态从哪来

正确心智：

text

composable = 可复用的逻辑单元
不是隐形全局垃圾场

#3. 一个常见场景：封装栏目数据逻辑

// app/composables/useFeaturedNews.ts
export const useFeaturedNews = () => {
  return useFetch('/api/news/featured', {
    key: 'featured-news'
  })
}

页面中直接用：

vue

<script setup lang="ts">
const { data, status, refresh } = await useFeaturedNews()
</script>