如何在 TypeScript Vue 组件中访问全局 mixin 的方法？

Question

我正在使用 TypeScript 开发一个 Vue 应用程序。我创建了一个 mixin（如下所示global.mixin.js），并将其注册为Vue.mixin()（main.ts如下所示）。

全局.mixin.js

import { mathHttp, engHttp } from '@/common/js/http'

export default {
  methods: {
    wechatShare(config) {
      config.imgUrl = config.imgUrl
      mathHttp.get('/wechat/config', {
        url: encodeURIComponent(window.location.href),
      }).then((data) => {
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.noncestr,
          signature: data.signature,
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
        })
      })
      wx.ready(() => {
        wx.updateAppMessageShareData(config)
        wx.updateTimelineShareData(config)
      })
    },
  },
}

主要.ts

我注册了全局 mixin Vue.mixin()：

import { mathHttp, engHttp } from '@/common/js/http'

export default {
  methods: {
    wechatShare(config) {
      config.imgUrl = config.imgUrl
      mathHttp.get('/wechat/config', {
        url: encodeURIComponent(window.location.href),
      }).then((data) => {
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.noncestr,
          signature: data.signature,
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
        })
      })
      wx.ready(() => {
        wx.updateAppMessageShareData(config)
        wx.updateTimelineShareData(config)
      })
    },
  },
}

但是当我尝试从 Vue 组件中访问 mixin 方法时，出现错误：

property wechatShare doesn't exist on type Test.vue

测试.vue

import globalMixins from './mixins/global.mixin'

Vue.mixin(globalMixins)

我怎么解决这个问题？

Answer 1

vue-property-decorator对来自 的mixin使用相同的语义vue-class-component。根据vue-class-component文档中的示例，mixin 采用与组件相同的形式：

src/mixin.ts：

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class MyMixin extends Vue {
  wechatShare(config) {
    //...
  }
}

使用Mixinsfrom vue-property-decorator（或mixinsfrom vue-class-component），包装您的自定义 mixin，并使用您的组件扩展它：

src/App.vue：

import { Component, Mixins } from 'vue-property-decorator'
// OR
// import Component, { mixins } from 'vue-class-component'

import MyMixin from './mixin'

@Component
export default class App extends Mixins(MyMixin) {
  mounted() {
    this.wechatShare(/* ... */)
  }
}