vue-class-component ：如何创建和初始化反射数据

Question

我将 vuejs 与 typescript 和 vue-class-component 一起使用。我正在尝试使用反应数据创建自定义组件。

这是我的代码：

<template>
    <div>
        <input v-model="data.name" placeholder="Name">
        <input v-model="data.value" placeholder="Value">
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

interface Model {
    name: string;
    value: number;
}
@Component
export default class ClubVue extends Vue {
    private data: Model;

    public mounted() {
        this.data = {...this.$store.getters.data};
    }
}
</script>

在第一个版本中，我遇到了这个错误：

属性或方法“数据”未在实例上定义，但在渲染期间被引用

这是正常的，正如在 vue-class-component 页面中所说，未定义的数据不会被反射。我需要将数据初始化为空。此外，我收到此打字稿错误：

属性“数据”没有初始值设定项，并且未在构造函数中明确分配

所以我想这样做：

private data: Model = null;

但是我收到了这个打字稿错误：

类型 'null' 不能分配给类型 'Model'。

我不想将数据类型更改为 ，Model | null因为我必须在任何地方检查数据是否为空，而且我知道数据永远不会为空。

private data!: Model;

也不起作用，因为数据将是未定义的，因此不会是被动的。

我不想关闭打字稿检查，因为它们对代码的其他部分很有用。

这里有初始化数据的正确方法吗？

Answer 1

这种属性的正确类型是：

private data: Model | null = null;

它可以与类型保护一起使用：

if (this.data) {
  console.log(this.data.name); // Model
}

或非空断言运算符：

console.log(this.data!.name); // Model

一种解决方法是使用断言欺骗打字系统：

private data: Model = null as unknown as Model;

vue-class-component 不考虑 TypeScript，因为undefined在 TypeScript 中它比 更容易处理null，特别是因为这允许将属性标记为可选。

我知道数据永远不会为空。

这将是null直到组件安装，这叶子错误的房间：

public created() {
    console.log(this.data.name); // runtime error but no compilation error
}

public mounted() {
    this.data = {...this.$store.getters.data};
}