[英]How to do annotating correctly in Vue2.x Class component with TypeScript
I've adopted my project with @vue/composition-api
我已经通过
@vue/composition-api
采用了我的项目
// main.ts
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
But when setting setup()
in a Class Component,但是在 Class 组件中设置
setup()
时,
<template>
<h1>{{ name }}</h1>
</template>
<script lang="ts">
import { ComputedRef, ref } from '@vue/composition-api'
import { Component, Vue } from 'vue-property-decorator'
function useName(): { name: ComputedRef<string> } {
const name = ref('Joe')
return { name }
}
@Component({
setup() {
const { name } = useName()
return { name }
}
})
export default class TestName extends Vue {}
</script>
I always get a warning message like:我总是收到如下警告消息:
I know that comes from the missing property definition in regular data
field in Class Component.我知道这来自 Class 组件中常规
data
字段中缺少的属性定义。 But by using @vue/composition-api
, we actually don't need to set the data
property.但是通过使用
@vue/composition-api
,我们实际上不需要设置data
属性。
Is there anyone knows how to how to solving the issue.有没有人知道如何解决这个问题。
Your code works without error in a Vue project, but your screenshot of the browser console shows that you're using Nuxt .您的代码在Vue项目中正常运行,但浏览器控制台的屏幕截图显示您正在使用Nuxt 。
To use the Composition API in Nuxt, install @nuxtjs/composition-api
(which includes @vue/composition-api
, so need to explicitly install it):要在 Nuxt 中使用 Composition API,请安装
@nuxtjs/composition-api
(其中包括@vue/composition-api
,因此需要显式安装):
npm i -S @nuxtjs/composition-api
Then in nuxt.config.js
, add it as a build module:然后在
nuxt.config.js
中,将其添加为构建模块:
module.exports = {
buildModules: [
'@nuxtjs/composition-api/module'
],
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.