Как украсить компонент класса Vue TypeScript с помощью импортированного метода?

Question

Я недавно начал использовать компоненты класса 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

Решением этой проблемы было просто использовать @Component для украшения компонента методами:

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

Answer 2

До того как я использовал 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>