面试题：Vue Composition API下复杂业务逻辑复用及依赖管理

实现思路

创建共享逻辑的组合式函数：利用Vue Composition API的setup函数来创建一个可复用的函数，用于处理用户登录状态的判断及相关操作。
状态管理：使用响应式数据来存储用户登录状态，例如ref或reactive。
依赖注入：通过provide和inject来管理模块间的依赖关系，确保不同模块能获取到共享的用户登录状态逻辑。

核心代码框架

创建共享逻辑的组合式函数

import { ref, computed } from 'vue';

// 创建一个组合式函数
export function useUserLogin() {
  // 存储用户登录状态，假设初始为未登录
  const isLoggedIn = ref(false);

  // 模拟登录方法
  const login = () => {
    isLoggedIn.value = true;
  };

  // 模拟登出方法
  const logout = () => {
    isLoggedIn.value = false;
  };

  // 计算属性，用于在模板中判断是否登录
  const isUserLoggedIn = computed(() => isLoggedIn.value);

  return {
    isLoggedIn,
    login,
    logout,
    isUserLoggedIn
  };
}

在商品列表模块中使用

<template>
  <div>
    <h2>商品列表</h2>
    <div v-if="isUserLoggedIn">
      <p>欢迎您，已登录用户！</p>
    </div>
    <div v-else>
      <button @click="login">登录</button>
    </div>
  </div>
</template>

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

const { isUserLoggedIn, login } = useUserLogin();
</script>

在购物车模块中使用

<template>
  <div>
    <h2>购物车</h2>
    <div v-if="isUserLoggedIn">
      <p>购物车操作，已登录用户才能进行。</p>
    </div>
    <div v-else>
      <p>请先登录以使用购物车。</p>
      <button @click="login">登录</button>
    </div>
  </div>
</template>

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

const { isUserLoggedIn, login } = useUserLogin();
</script>

通过依赖注入管理依赖关系（如果有更复杂的跨组件依赖）

// 在父组件中
import { provide } from 'vue';
import { useUserLogin } from './useUserLogin.js';

export default {
  setup() {
    const userLogin = useUserLogin();
    provide('userLogin', userLogin);
    return {};
  }
};

<!-- 子组件中 -->
<template>
  <div>
    <div v-if="userLogin.isUserLoggedIn">
      <p>子组件中基于依赖注入获取的登录状态：已登录</p>
    </div>
    <div v-else>
      <p>子组件中基于依赖注入获取的登录状态：未登录</p>
    </div>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const userLogin = inject('userLogin');
</script>

星途面试题库

面试题：Vue Composition API下复杂业务逻辑复用及依赖管理

知识考点

面试题答案

实现思路

核心代码框架