How to access global mixin's methods in TypeScript Vue component?

Question

I'm developing a Vue app using TypeScript. I created a mixin (shown in global.mixin.js below), and registered it with Vue.mixin() (shown in main.ts below).

global.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)
      })
    },
  },
}

main.ts

I registered the global mixin with Vue.mixin():

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

Vue.mixin(globalMixins)

But when I try to access the mixin method from within a Vue component, I get an error:

property wechatShare doesn't exist on type Test.vue

Test.vue

<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({ components: { } })
export default class Test extends Vue {

  created() {
    this.setWeChatShare()
  }

  setWeChatShare() {
    this.wechatShare
  }
}
</script>

How can I solve this problem?

tony19 · Accepted Answer · 2019-12-10 08:52:52Z

2

vue-property-decorator uses the same semantics for mixins from vue-class-component. Based on the example from vue-class-component docs, the mixin takes the same form as a component:

src/mixin.ts:

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

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

Using the Mixins from vue-property-decorator (or mixins from vue-class-component), wrap your custom mixin, and extend it with your component:

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(/* ... */)
  }
}

edited Dec 10, 2019 at 8:52

answered Dec 10, 2019 at 8:47

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JPilson · Accepted Answer · 2020-12-03 15:02:22Z

For those who want to use mixin globally and prevent importing in every component, this is what you can do.

src/mixins/mixin.ts

    import { Vue, Component } from 'vue-property-decorator'
    import Colors from "@/values/Colors"
    import Strings from "@/values/Strings";

    @Component
    export default class Values extends Vue {
        public test = 'Hello, hello, hello';
        public colors: {} = Colors.light;
        public strings: {} = Strings.pt
    }

inside src/main.ts

import Values from "@/values/Values";//my Mixin
Vue.mixin(Values)

inside your src/shims-tsx.d.ts

// add the variables,functions ... inside the vue interface and then you will good to use them anywhere. 
interface Vue {
        colors,
      strings
    }

Collectives™ on Stack Overflow

How to access global mixin's methods in TypeScript Vue component?

global.mixin.js

main.ts

Test.vue

2 Answers 2

src/mixin.ts:

src/App.vue:

Comments

src/mixins/mixin.ts

inside src/main.ts

inside your src/shims-tsx.d.ts

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

global.mixin.js

main.ts

Test.vue

2 Answers 2

src/mixin.ts:

src/App.vue:

Comments

src/mixins/mixin.ts

inside src/main.ts

inside your src/shims-tsx.d.ts

Comments

Your Answer

Sign up or log in

Post as a guest

Related