如何减少重复代码，以面向对象方式开发？

[shuxinqin]

比如一个弹框需求，我想抽象一些公共的字段与方法，避免重复性编码。
我直接上代码了，大家应该都能看懂~

//采用平常的的方式，每次每个页面都要定义 visible，open，sure等重复性的属性和方法
let formDialog = reactive({
    visible: false,
    open: () => {
        formDialog.visible = true;
    },
    sure: function () {
        formDialog.visible = false;
    }
});

//所以我想使用继承解决重复性问题，但是因为 this 指向问题，页面无法正常运行

//定义公供的基类
class FormDialogBase {

    public visible: boolean = false;

    constructor() {
    }
    //定义一个 open 方法，供外部调用
    public open() {
        //this 为 undefined，无法更好的面向对象，无法使用继承重用代码
        this.visible = true;
    }

    public sure() {
        //this 为 undefined，无法更好的面向对象，无法使用继承重用代码
        this.visible = false;
    }
}

class FormDialog extends FormDialogBase {

    //表单内容
    public name: string = “”;

    constructor() {
        super();
    }
}

//但是将 new FormDialog() 使用 reative 包装，但是 FormDialog 内部无法使用 this 了，会报 this 为 undefined 的错误
//所以请问如何避免每次都要定义 visible，open，sure等重复性的属性和方法，有什么好办法吗？
let formDialog = reactive(new FormDialog());

页面绑定：

<a-button type=“primary” @click=“formDialog.open”>添加
<a-modal v-model:visible=“formDialog.visible” title=“Basic Modal” @ok=“formDialog.sure”>
  <input v-model="formDialog.name" >
</a-modal>

之所以出现这么一种想法是因为对于一个页面来说，页面内的任何元素都可以抽象为一个对象，它拥有着自己的内部属性和方法。
但是以目前vue的设计（或者说机制）貌似无法使用这种思想去编程开发，因为它更改了this指针，很蛋疼。很多逻辑都可以提出来共用，但没法使用this指针，就没法使用继承了。因此开发过程会出现很多重复的代码。同时也正是因为没办法使用面向对象思想开发一个页面（可以抽象成组件，但跨组件间操作和数据传递有点难用，我觉得组件不是理想的解决方案），导致一个页面所有的元素绑定的字段、数据、方法都平摊在一个作用域内，好难受，大家有什么好办法解决吗？

[varHarrie]

function useBoolean(defaultValue = false) {
  const bool = ref(defaultValue);

  const toggle = (nextValue = !bool.value) => {
    bool.value = nextValue;
  }

  return [bool, toggle];
}

function useDialog() {
  const [visible, toggle] = useBoolean();

  const open () => toggle(true);
  const close () => toggle(false);

  return { visible, open, close }
}

function useFormDialog() {
  const dialog = useDialog();

  const model = reactive({
    name: '',
  });

  const submit = () => {
    // form validation...
    dialog.close();
  }

  return { model, ...dialog, submit }
}

[shuxinqin]

@varHarrie good idea, thx！学习了.