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

Question

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

我已经尝试添加方法，就像我在没有typescript的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

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

不确定这是否是您正在寻找的，但如果您想在组件init上运行某些东西，您可以在组件内部使用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>

Answer 2

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

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