Question

我最近开始在我的Vue.js项目中使用TypeScript。对于当前项目（一个非常简单的聊天应用程序），我创建了一个名为ChatParent.ts的TypeScript类。它包含发送/接收消息所需的所有方法和变量。我将在其他组件中扩展此类。从这些子类调用父方法效果很好，但是，当我监视父类中的变量（例如username）时，更改不会反映在子组件的DOM中。

我尝试添加setter / getter方法和计算属性（例如get methodName(): boolean），但两者均无效。

下面的代码来自ChatParent.ts，并且已经简化。

@Component({
    name: "ChatParent",
})
 export default class ChatParent extends Vue {
    private chatClient: new ChatClient(...);
    subscribed: boolean = false;

    username: string = "";

    subscribe() {
        const subscriptionRequest = new SubscriptionRequest();
        subscriptionRequest.setUsername(username);

        this.chatClient.subscribe(subscriptionRequest).on("data", data => {
            this.subscribed = true;
        });
    }
    ...
}

以下来自TypeBox.vue。

<template>
    <v-container pa-2>
        <v-textarea
                outline
                label="Type message here..."
                :disabled="!subscribed"
                v-model="message"
        ></v-textarea>
    </v-container>

</template>

<script lang="ts">
    import {Component} from "vue-property-decorator";
    import ChatParent from "@/components/ChatParent.ts";

    @Component({
        name: "TypeBox",
    })
    export default class TypeBox extends ChatParent {
        message : string = "";
    }
</script>

无论何时在data方法中调用subscribe(...)回调，订阅变量都会在父类中更新，但更改不会反映在子组件中（应该启用子组件）。如果subscribe变量为true，则为文本区域。）

我认为我对Vue + TypeScript的理解可能是完全不正确的（关于扩展类）。因此，我非常感谢您提供一些见识。

Answer 1

我的猜测是您某个类中的某些数据可能未定义。在这种情况下，您的数据将不会是被动的（请参阅：https://github.com/vuejs/vue-class-component#undefined-will-not-be-reactive）。您可以尝试使用这种语法，例如username: string = null!

Answer 2

似乎我不理解在Vue / TypeScript中正确使用扩展类。扩展父类（ChatParent）的所有类之间没有共享变量数据，这就是为什么变量没有触发DOM更改的原因。

我通过如下使用Vuex解决了这个问题：

  class ChatModule extends VuexModule {
  // Variables
  chatClient!: ChatClient;
  subscribed: boolean = false;
  username: string = "";
  messages: string = "";

  // Getters
  get getUsername(): string {
    return this.username;
  }

  get getMessages(): string {
    return this.messages;
  }

  get isSubscribed(): boolean {
    return this.subscribed;
  }

  // Mutations and Actions 
  ...

  export default getModule(ChatModule);
}

Vuex存储包含所有变量。 TypeBox.vue组件现在仅扩展了Vue并调用存储操作/获取器：

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import chat from "@/store/modules/chat";
@Component({
  name: "TypeBox"
})
export default class TypeBox extends Vue {
  private message: string = "";
  clearMessage(): void {
    this.message = "";
  }
  sendMessage(message: string): void {
    chat.sendMessage(message);
  }
  get isSubscribed(): boolean {
    return chat.isSubscribed;
  }
}
</script>

可以使用vuex-module-decorators npm模块将Vuex存储操作/获取器/突变设置为“安全”类型。

有关更多详细信息，请访问see my GitHub repository。

Vue变量在扩展TypeScript父类的子级中不起作用

2 个答案: