ThorUI-uniapp 项目中 Vue3 状态管理的最佳实践

在基于 Vue3 的 ThorUI-uniapp 项目中，状态管理是一个需要特别关注的技术点。本文将深入探讨 Vue3 中状态管理的演进，以及为什么在项目中推荐使用依赖注入而非全局变量绑定的技术方案。

全局变量绑定的传统方案

在 Vue2 时代，开发者习惯通过挂载到 Vue 原型上的方式来共享全局变量和方法。这种模式在 Vue3 中依然可以通过 app.config.globalProperties 实现：

app.config.globalProperties.tui = tui;

这种方式虽然简单直接，但在组合式 API 中需要通过 getCurrentInstance 获取实例后才能访问：

const { proxy } = getCurrentInstance();
proxy.tui.xxx();

组合式 API 带来的挑战

Vue3 引入的组合式 API 提倡函数式编程风格，而全局属性绑定本质上是一种面向对象的模式，两者存在理念上的冲突。更严重的是，getCurrentInstance 方法返回的是 Vue 内部实例，官方明确指出：

因为实例是暴露非公共 API 的内部实例。从该实例使用的任何内容在技术上都可以在任何发布版本之间中断，因为它们不受语义版本控制约束。

这意味着依赖内部实例的代码可能在未来的 Vue 版本中出现兼容性问题。

依赖注入的现代方案

Vue3 提供了更符合其设计理念的依赖注入 API —— provide/inject。这种方式具有以下优势：

1. 类型安全：配合 TypeScript 可以提供完整的类型推断
2. 作用域可控：可以精确控制注入的范围
3. 组合式友好：完美适配 setup 语法
4. 未来兼容：官方推荐的标准用法

实现方式如下：

// 在应用入口提供依赖
app.provide('tui', tui);

// 在组件中注入使用
import { inject } from 'vue';
const tui = inject('tui');

两种方案的对比分析

特性	全局属性绑定	依赖注入
组合式 API 兼容性	差(需实例代理)	优秀
类型支持	有限	完整
作用域控制	全局	可精确控制
未来兼容性	风险高	官方推荐
代码可维护性	较差	优秀

迁移建议

对于正在使用 ThorUI-uniapp 的开发者，建议逐步将全局属性迁移到依赖注入模式：

1. 首先修改应用入口，同时保留两种方式以兼容旧代码
2. 逐步重构组件，优先处理核心业务组件
3. 最终移除全局属性绑定，完全采用依赖注入

最佳实践示例

// main.js
export function createApp() {
  const app = createSSRApp(App);
  
  // 传统方式（逐步淘汰）
  app.config.globalProperties.tui = tui;
  
  // 现代方式（推荐）
  app.provide('tui', tui);
  
  return { app };
}

// 组件中使用
import { inject } from 'vue';

export default {
  setup() {
    const tui = inject('tui');
    
    // 使用tui...
  }
}

总结

在 ThorUI-uniapp 这类基于 Vue3 的项目中，采用依赖注入而非全局变量绑定，不仅能够更好地适应组合式 API 的编程范式，还能提高代码的健壮性和可维护性。这种转变代表了前端开发从面向对象到函数式思维的演进，是 Vue3 现代化开发体验的重要组成部分。