如何用导入的方法装饰 typescript vue 类组件？

Question

我最近开始使用带有 typescript 的 vue 类组件，但找不到用导入的实用程序方法装饰组件类的方法。我正在使用nuxt-property-decorator 来装饰我的组件。

我已经尝试添加方法，就像我在没有打字稿的 vue 组件中那样：

import doSomething from './somewhere';

<script>
    export default {
        methods: {
            doSomething,// I'd do this without typescript, works as expected
        },
    }
</script>

<script lang="ts">
    import Vue from 'vue';
    import {Component} from 'nuxt-property-decorator';
    import doSomething from './somewhere';

    @Component
    export default class MyCustomClass extends Vue {
        doSomething, // Doesn't, "Property or method doSomething is not defined on the instance but referenced during render..."

        hacky() {
            return doSomething(); // I guess I could do it this way, but this looks like a very hacky way
        }
    }
</script>

Answer 1

你所要做的就是：

doSomething = doSomething

所有其他方法都在哪里。

Answer 2

解决这个问题的方法是简单地使用@Component 来装饰组件：

<script lang="ts">
    @Component({
        methods: {
            preventContextMenu,
        },
    })
    export default class MyCustomClass extends Vue {
        ...
    }
</script>

Answer 3

在我使用vue-property-decorator 之前。据我所知，nuxt-property decorator 就是基于它。

不确定这是否是您要查找的内容，但如果您想在组件初始化上运行某些东西，您可以在组件内使用mounted。这是生命周期钩子

例子：

        import doSomething from './somewhere';

        <script>
            export default {
                methods: {
                    doSomething,// I'd do this without typescript, works as expected
                },
            }
        </script>

        <script lang="ts">
            import Vue from 'vue';
            import {Component} from 'nuxt-property-decorator';
            import doSomething from './somewhere';

            @Component
            export default class MyCustomClass extends Vue {

                public mounted(){
                  doSomething...
                  // everything in this method  will be triggered on component load
                }
            }
        </script>