面试题：Vue中使用Vue Composition API如何实现基础的模块化设计

在Vue Composition API中，可以通过将不同功能逻辑封装到独立的函数中来实现模块化。

以用户登录功能为例：

创建一个独立的文件，例如useLogin.js，用于存放登录相关逻辑。

import { ref } from 'vue';

export function useLogin() {
    const username = ref('');
    const password = ref('');
    const error = ref('');

    const login = async () => {
        try {
            // 模拟登录请求
            const response = await fetch('/api/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username: username.value, password: password.value })
            });
            if (!response.ok) {
                throw new Error('登录失败');
            }
            const data = await response.json();
            // 登录成功后的处理
            console.log('登录成功', data);
        } catch (e) {
            error.value = '用户名或密码错误';
        }
    };

    return {
        username,
        password,
        error,
        login
    };
}

在Vue组件中使用这个模块化的逻辑：

<template>
    <div>
        <input v-model="username" placeholder="用户名">
        <input v-model="password" placeholder="密码" type="password">
        <button @click="login">登录</button>
        <p v-if="error">{{ error }}</p>
    </div>
</template>

<script setup>
import { useLogin } from './useLogin.js';

const { username, password, error, login } = useLogin();
</script>

这样，用户登录功能的逻辑就被单独模块化了，其他组件如果也需要登录功能，直接引入useLogin函数即可复用。

星途面试题库

面试题：Vue中使用Vue Composition API如何实现基础的模块化设计

知识考点

面试题答案