Vue.js 依赖注入

// 祖先组件
export default {
  data() {
    return {
      // 响应式对象
      user: {
        name: '张三',
        age: 25
      }
    };
  },
  provide() {
    return {
      // 提供整个响应式对象
      user: this.user,

      // 或者提供对象的响应式属性
      userName: Vue.computed(() => this.user.name),
      userAge: Vue.computed(() => this.user.age)
    };
  },
  methods: {
    updateUser() {
      // 修改响应式数据
      this.user.name = '李四';
      this.user.age = 30;
      // 子孙组件会自动更新！
    }
  }
};
                                        

// 祖先组件
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', completed: false },
        { id: 2, name: 'Item 2', completed: true },
        { id: 3, name: 'Item 3', completed: false }
      ]
    };
  },
  computed: {
    // 计算属性是响应式的
    completedItems() {
      return this.items.filter(item => item.completed);
    },
    pendingItems() {
      return this.items.filter(item => !item.completed);
    }
  },
  provide() {
    return {
      // 提供计算属性
      completedItems: Vue.computed(() => this.completedItems),
      pendingItems: Vue.computed(() => this.pendingItems),

      // 提供响应式方法
      toggleItem: (id) => {
        const item = this.items.find(item => item.id === id);
        if (item) {
          item.completed = !item.completed;
        }
      }
    };
  }
};
                                        

// keys.js - 集中管理所有注入键
export const ThemeSymbol = Symbol('theme');
export const UserSymbol = Symbol('user');
export const ConfigSymbol = Symbol('config');
export const ApiSymbol = Symbol('api');

// 在大型应用中，可以按功能模块组织
export const AuthKeys = {
  USER: Symbol('auth.user'),
  TOKEN: Symbol('auth.token'),
  LOGIN: Symbol('auth.login'),
  LOGOUT: Symbol('auth.logout')
};

export const UiKeys = {
  THEME: Symbol('ui.theme'),
  LANGUAGE: Symbol('ui.language'),
  NOTIFICATIONS: Symbol('ui.notifications')
};
                                        

// 祖先组件
import { ThemeSymbol, UserSymbol } from './keys.js';

export default {
  provide() {
    return {
      [ThemeSymbol]: this.theme,
      [UserSymbol]: this.currentUser
    };
  }
};

// 子孙组件
import { ThemeSymbol, UserSymbol } from './keys.js';

export default {
  inject: {
    // 使用Symbol作为键
    theme: { from: ThemeSymbol },
    user: { from: UserSymbol, default: null }
  }
};
                                        

场景： 在整个应用中共享主题配置

// 根组件
provide() {
  return {
    theme: this.theme,
    toggleTheme: this.toggleTheme,
    themeConfig: this.themeConfig
  };
}

// 任何子组件
inject: ['theme', 'toggleTheme'],
computed: {
  themeClass() {
    return `theme-${this.theme}`;
  }
}
                                        

场景： 在整个应用中共享用户认证状态

// 根组件
provide() {
  return {
    currentUser: this.currentUser,
    isAuthenticated: this.isAuthenticated,
    login: this.login,
    logout: this.logout
  };
}

// 需要认证的组件
inject: ['currentUser', 'isAuthenticated'],
computed: {
  userName() {
    return this.currentUser?.name || '游客';
  }
}
                                        

场景： 在整个应用中共享语言和翻译函数

// 根组件
provide() {
  return {
    locale: this.locale,
    t: this.translate,
    availableLocales: this.availableLocales,
    changeLocale: this.changeLocale
  };
}

// 需要国际化的组件
inject: ['locale', 't'],
computed: {
  greeting() {
    return this.t('greeting');
  }
}
                                        

场景： 在整个应用中共享API客户端实例

// 根组件
provide() {
  return {
    $api: this.$api,
    $authApi: this.$authApi,
    $uploadApi: this.$uploadApi
  };
}

// 需要调用API的组件
inject: ['$api'],
methods: {
  async fetchData() {
    const data = await this.$api.get('/users');
    return data;
  }
}
                                        

• 全局配置：主题、语言、API端点等
• 共享服务：认证、通知、日志等
• 工具函数：格式化、验证、工具类等
• 复杂表单状态：跨多个组件的表单状态管理
• 插件集成：第三方库的实例共享
• 避免prop drilling：当组件层级很深时

• 父子组件通信：使用props和events更合适
• 兄弟组件通信：使用事件总线或Vuex更合适
• 简单数据流：当props可以轻松解决时
• 需要类型检查：依赖注入不提供类型检查
• 组件复用性重要：依赖注入会降低组件独立性
• 小型应用：过度设计会增加复杂度

// 祖先组件
import { provide, ref, reactive, computed } from 'vue';

export default {
  setup() {
    // 响应式数据
    const theme = ref('light');
    const user = reactive({
      name: '张三',
      age: 25
    });

    // 提供依赖
    provide('theme', theme);
    provide('user', user);
    provide('toggleTheme', () => {
      theme.value = theme.value === 'light' ? 'dark' : 'light';
    });

    // 提供计算属性
    const isAuthenticated = computed(() => !!user.name);
    provide('isAuthenticated', isAuthenticated);

    return { theme, user };
  }
};
                                        

// 子孙组件
import { inject } from 'vue';

export default {
  setup() {
    // 注入依赖
    const theme = inject('theme');
    const user = inject('user');
    const toggleTheme = inject('toggleTheme');
    const isAuthenticated = inject('isAuthenticated');

    // 提供默认值
    const config = inject('config', { theme: 'light' });

    // 类型断言
    const api = inject('api');

    // 如果依赖必须存在
    const requiredDep = inject('requiredDep');
    if (!requiredDep) {
      throw new Error('requiredDep is required');
    }

    return {
      theme,
      user,
      toggleTheme,
      isAuthenticated,
      config,
      api
    };
  }
};