Vue类式组件集成Composables问题：如何访问setup返回值

在Vue 2向Vue 3迁移的类式组件场景中，setup函数返回的属性会自动挂载到组件实例上，可通过this直接访问，但需处理TypeScript的类型识别问题，具体方案如下：

方案1：手动声明实例属性类型 #

在类内部声明对应属性的类型，让TypeScript识别这些来自setup的成员：

import { Component, Vue } from 'vue-property-decorator';
import { ref, Ref } from 'vue';
import useFullscreen from './useFullscreen';

@Component({
  setup() {
    const fullscreenElement = ref<HTMLElement | undefined>();
    const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(fullscreenElement);

    return {
      fullscreenElement,
      isFullscreen,
      toggleFullscreen,
    };
  },
})
export default class MyClassComponent extends Vue {
  // 声明来自setup的属性类型
  fullscreenElement!: Ref<HTMLElement | undefined>;
  isFullscreen!: Ref<boolean>; // 根据useFullscreen实际返回类型调整
  toggleFullscreen!: () => void;

  // 类方法中访问示例
  checkFullscreenStatus() {
    console.log(this.isFullscreen.value);
    this.toggleFullscreen();
  }
}

方案2：将Composable逻辑移至类内部（贴合类组件写法） #

若不想依赖setup选项，可直接在类的生命周期钩子中调用Composable，将结果赋值给类属性：

import { Component, Vue } from 'vue-property-decorator';
import { ref, Ref } from 'vue';
import useFullscreen from './useFullscreen';

@Component
export default class MyClassComponent extends Vue {
  fullscreenElement = ref<HTMLElement | undefined>();
  isFullscreen!: Ref<boolean>;
  toggleFullscreen!: () => void;

  created() {
    // 在生命周期钩子中调用Composable并赋值
    const composableResult = useFullscreen(this.fullscreenElement);
    this.isFullscreen = composableResult.isFullscreen;
    this.toggleFullscreen = composableResult.toggle;
  }

  // 类方法中访问示例
  toggleFullscreenMode() {
    this.toggleFullscreen();
    console.log('当前全屏状态：', this.isFullscreen.value);
  }
}

注意事项 #

• 基于Vue 2的vue-class-component和vue-property-decorator，setup返回的响应式属性需通过.value访问（因是Ref类型）。
• 类型声明中的!是非空断言，确保TypeScript识别属性会被初始化。

内容的提问来源于stack exchange，提问作者Micheal J. Roberts