Vue：使用Vue.mixin时出现TypeScript错误

Question

我正在使用Vue.js构建SSR应用程序。

我尝试this时遇到打字错误。

Vue.mixin({
    beforeRouteUpdate (to, from, next) {
        const { asyncData } = this.$options
        if (asyncData) {
            asyncData({
                store: this.$store,
                route: to
            }).then(next).catch(next)
        } else {
            next()
        }
    }
})

这是错误。

Property '$options' does not exist on type 'VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.


Property '$store' does not exist on type 'VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.

如何避免此错误？ 我是打字稿的新手。 谢谢。

Answer 1

您可以执行以下操作：

Vue.mixin({
    beforeRouteUpdate ((this as Vue), to, from, next) {
        const vm = this as Vue;
        const { asyncData } = vm.$options
        if (asyncData) {
            asyncData({
                store: vm.$store,
                route: to
            }).then(next).catch(next)
        } else {
            next()
        }
    }
})