企业官网建设流程全解析

10分钟上手@nuxtjs/composition-api：从安装到第一个组件

【免费下载链接】composition-apiComposition API hooks for Nuxt 2.项目地址: https://gitcode.com/gh_mirrors/com/composition-api

@nuxtjs/composition-api是Nuxt 2项目中使用Vue Composition API的必备工具，它让你能够在Nuxt应用中充分利用组合式API的强大功能，编写更模块化、更易维护的代码。本教程将带你快速掌握从安装到创建第一个组件的完整流程。

快速安装与配置步骤 🚀

1. 安装依赖包

首先通过包管理器安装@nuxtjs/composition-api：

:::::code-group ::::code-block{label="Yarn" active}

yarn add @nuxtjs/composition-api

:::: ::::code-block{label="NPM"}

npm install @nuxtjs/composition-api --save

:::: :::::

2. 配置Nuxt模块

在nuxt.config.js中添加模块配置：

{ buildModules: [ '@nuxtjs/composition-api/module' ] }

注意：如果你的Nuxt版本低于2.9，请使用modules配置项代替buildModules。

3. 自动配置说明

安装完成后，模块会自动完成以下工作：

• 安装并配置@vue/composition-api插件
• 提供Composition API方法的直接导出，无需额外导入
• 注入Babel插件处理SSR相关的ref键生成

创建你的第一个Composition API组件 ✨

下面我们创建一个使用useFetch获取博客文章列表的页面组件，完整代码位于example/pages/index.vue：

<template> <div> <h1>Blog posts</h1> <template v-if="$fetchState.pending"> <content-placeholders> <content-placeholders-text :lines="20" /> </content-placeholders> </template> <template v-else-if="$fetchState.error"> <p>Error while fetching posts: {{ $fetchState.error.message }}</p> </template> <template v-else> <ul> <li v-for="post of posts" :key="post.id"> <n-link :to="`/posts/${post.id}`"> {{ post.title }} </n-link> </li> </ul> </template> </div> </template> <script> import { defineComponent, useFetch, useContext, ref, } from '@nuxtjs/composition-api' export default defineComponent({ setup() { const posts = ref([]) const { $http } = useContext() useFetch(async () => { const data = await $http.$get('https://jsonplaceholder.typicode.com/posts') posts.value = data.slice(0, 20) }) return { posts } }, }) </script>

核心API解析 🔍

setup函数：组件的入口点

setup函数是Composition API的入口，在组件创建前执行：

export default defineComponent({ setup() { // 组件逻辑在这里编写 return { /* 暴露给模板的变量 */ } } })

useContext：访问Nuxt上下文

通过useContext可以获取Nuxt的上下文对象，替代传统的this访问：

const { $http, app, store } = useContext()

useFetch：数据获取的新方式

useFetch是Nuxt特有的组合式API，用于数据获取，替代传统的asyncData和fetch方法：

useFetch(async () => { // 异步数据获取逻辑 posts.value = await fetchData() })

它会自动处理：

• 服务器端渲染时的数据预获取
• 客户端导航时的数据获取
• 加载状态和错误处理（通过$fetchState）

ref：响应式数据

ref用于创建响应式数据，在模板中使用时会自动解包：

const posts = ref([]) // 修改数据 posts.value = newData

常见问题与解决方案 🛠️

类型提示支持

为获得更好的TypeScript支持，建议在组件中使用JSDoc注释：

/** @typedef {{ userId: number, id: number, title: string, body: string }} Post */ const posts = ref(/** @type {Post[]} */([]))

与Options API混合使用

虽然可以混合使用Options API和Composition API，但推荐优先使用Composition API：

export default defineComponent({ data() { return { /* Options API数据 */ } }, setup() { // Composition API逻辑 } })

项目结构与最佳实践 📁

推荐将组合逻辑提取到独立的composables文件中，例如：

// composables/usePosts.js import { ref, useFetch } from '@nuxtjs/composition-api' export function usePosts() { const posts = ref([]) useFetch(async () => { posts.value = await fetchPosts() }) return { posts } }

然后在组件中导入使用：

import { usePosts } from '~/composables/usePosts' export default defineComponent({ setup() { const { posts } = usePosts() return { posts } } })

扩展学习资源 📚

• 官方文档：docs/pages/en/index.md
• API参考：docs/pages/en/6.API
• 示例项目：example/

通过本教程，你已经掌握了@nuxtjs/composition-api的基本使用方法。开始在你的Nuxt项目中应用组合式API，体验更灵活的代码组织方式吧！

【免费下载链接】composition-apiComposition API hooks for Nuxt 2.项目地址: https://gitcode.com/gh_mirrors/com/composition-api