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).
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)
})
},
},
}
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
<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?
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:
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:
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(/* ... */)
}
}
For those who want to use mixin globally and prevent importing in every component, this is what you can do.
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
}
import Values from "@/values/Values";//my Mixin
Vue.mixin(Values)
// add the variables,functions ... inside the vue interface and then you will good to use them anywhere.
interface Vue {
colors,
strings
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.