如何同时导出ClsUseStates类及其getState()方法？

先修正原类里的两处错误：

• #state的初始值拼写错误：not-satrted → not-started
• #setState方法里的赋值对象写错了，应该给this.#state.value赋值，而非this.#setState.value，否则会触发运行错误

接下来就能实现同时导出类和绑定单例的getState方法，最终代码如下：

完整代码 #

import { ref } from 'vue'

// 保留类的默认导出，方便后续创建新实例
export default class ClsUseStates {
    #state = ref('not-started');

    useStates() {
        setTimeout(() => {
            this.#setState('started')
        }, 1000);

        setTimeout(() => {
            this.#setState('processing')
        }, 2000);

        setTimeout(() => {
            this.#setState('successful')
        }, 3000);
    }

    #setState(state) {
        this.#state.value = state;
    }

    getState() {
        return this.#state;
    }
}

// 创建类的单例实例
const statesSingleton = new ClsUseStates();

// 导出绑定单例的getState方法，直接调用就能获取单例的状态
export function getState() {
    return statesSingleton.getState();
}

导入使用示例 #

在其他文件中可以这样导入使用：

// 同时导入类和getState方法
import ClsUseStates, { getState } from './你的文件路径';

// 直接用导出的getState方法获取单例状态
console.log(getState().value); // 初始输出：not-started

// 需要新建实例时，直接使用导入的类
const newStatesInstance = new ClsUseStates();
newStatesInstance.useStates();

说明 #

• 既保留了类的导出，你可以随时创建新的类实例
• 导出的getState方法绑定了单例，调用它就等同于调用单例的getState方法，满足你直接导出方法的需求

内容的提问来源于stack exchange，提问作者Amrmsmb