Vue3响应式和封装

Question

我是 Vue 新手，目前正在使用 Vue3。作为学习练习，我正在制作一个简单的登录插件，并且进展顺利。我正在将reactive()与下面的类的实例一起使用，但是如果属性更改是在内部分配的，则在更新属性更改时会遇到一些麻烦。这是有问题的代码：

class dtAuthHandler {
  private _IsLoggedIn: boolean = false;
  public get IsLoggedIn(): boolean {
    return this._IsLoggedIn;
  }
  public set IsLoggedIn(value:boolean)
  {
    this._IsLoggedIn = value;
  }

  Login = () => {
    // More stuff here, internal state, etc.
    this.IsLoggedIn = true;
  }

  Logout = () => {
    // More stuff here, internal state, etc.
    this.IsLoggedIn = false;
  }
}

这是一个简单的函数，我用它来演示登录状态的切换。在第一种情况下，我可以直接设置属性并且 UI 按预期更新，非常棒。在第二种情况下，我想使用特定的 Login()/Logout() 函数，以便该类可以维护某种内部状态，与服务器通信等。问题是我不知道如何获取在内部设置“IsLoggedIn”属性时要更新的 UI。

toggleLogin: function () {
  // First Case:
  // Works great, makes sense to me.
  //this.$dtAuth.IsLoggedIn = !this.$dtAuth.IsLoggedIn;


  // Second Case:
  // This updates the state of the class just fine, but the UI doesn't get updated.
  // What to do?
  if (!this.$dtAuth.IsLoggedIn) {
    this.$dtAuth.Login();
  } else {
    this.$dtAuth.Logout();
  }

  // This seems like a hack....
  //this.$forceUpdate();
}

我最好的猜测是“reactive()”期望属性在外部设置，并且根本不知道它们何时在内部设置，或者我错过了一些明显的东西。处理此类情况的最佳方法是什么？

对于那些感兴趣的人，这就是插件的设置方式：

export default class dtAuth {

  private authState = new dtAuthHandler();
  install = (app: App) => {
    app.config.globalProperties.$dtAuth = reactive(this.authState);
  }
}

但是，应该知道，如果反应式实例是类组件中 data 的成员，我会得到相同的行为，例如

data() : return { auth: reactive(authState) };