Vue 2:设置空类作为数据属性

Question

我在Vue 2中有一个场景，我将API类初始化为组件上的数据属性，如下所示:

new Vue({
el: '#my-element'
data: {
apiUrl: apiUrl,
api: new ApiClient(this.apiUrl)
}
})

API客户端:

class ApiClient {
constructor(apiUrl) {
this.apiUrl = apiUrl;
}
async getRequest() {
// Perform GET
}
}

这工作得很好，但我有需要使用两个不同的API客户端的场景。例如，如果某个prop被传递到我的组件中，我想将该数据属性初始化为secondApi。

在这种情况下，我看到自己使用created()钩子:

created() {
if (prop === true) {
this.secondApi = new SecondApiClient(this.apiUrl);
}
}

在我的data : { }对象虽然，我不确定如何初始化这个可选的secondApi属性正确(在prop没有传入的情况下)。我一开始就把它设为空对象吗?它总是像apiClient一样是class对象。是否存在空类数据类型?

Answer 1

是，您可以遵循以下其中一个

方法1:

data() {
return {
apiUrl: apiUrl,
api: null // or you can even keep it as new ApiClient(this.apiUrl) if that's the default value
}
},
props: ['certainProperty'],
created() {
if (this.certainProperty === true) { // certainProperty is a prop
this.api = new SecondApiClient(this.apiUrl);
} else this.api = new ApiClient(this.apiUrl);
}

有时可能会延迟接收道具，所以最好遵循以下方法

方法2:

data() {
return {
apiUrl: apiUrl,
api: null // or you can even keep it as new ApiClient(this.apiUrl) if that's the default value
}
},
props: ['certainProperty'],
watch: {
certainProperty(newVal) {
if (newVal === true) { // certainProperty is a prop
this.api = new SecondApiClient(this.apiUrl);
} else this.api = new ApiClient(this.apiUrl);
}
}

注意:你需要从父组件传递props，比如

<child-component :certainProperty="true" />