What is the method to utilize global mixin methods within a TypeScript Vue component?

Question

What is the method to utilize global mixin methods within a TypeScript Vue component?

I am currently developing a Vue application using TypeScript. I have created a mixin (which can be found in global.mixin.js) and registered it using Vue.mixin() (as shown in main.ts).

Content of 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)
      })
    },
  },
}

Contents of main.ts:

I added the global mixin to my app using Vue.mixin():

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

Vue.mixin(globalMixins)

However, when I attempt to access the mixin method within a Vue component, I encounter an error message:

property wechatShare doesn't exist on type Test.vue

Content of 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 would you recommend resolving this issue?

javascript typescript vue.js vuejs2

Answer 1

Answer №1

vue-property-decorator follows the same mixin semantics as seen in vue-class-component. As illustrated in the example provided in the vue-class-component documentation, a mixin is structured similarly to a component:

src/mixin.ts:

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

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

To incorporate the Mixins feature from vue-property-decorator (or utilize mixins from vue-class-component), encapsulate 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(/* ... */)
  }
}

Answer 2

vue-property-decorator follows the same mixin semantics as seen in vue-class-component. As illustrated in the example provided in the vue-class-component documentation, a mixin is structured similarly to a component:

src/mixin.ts:

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

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

To incorporate the Mixins feature from vue-property-decorator (or utilize mixins from vue-class-component), encapsulate 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(/* ... */)
  }
}

Answer 3

Answer №2

If you're looking to implement a global mixin without having to import it in every component, here's how you can achieve that:

src/mixins/customMixin.ts

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

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

within src/main.ts

import CustomValues from "@/mixins/CustomValues";
Vue.mixin(CustomValues)

inside your src/shims-tsx.d.ts file

// Add the variables and functions to the Vue interface to use them globally.
interface Vue {
  colors,
  strings
}

Answer 4

If you're looking to implement a global mixin without having to import it in every component, here's how you can achieve that:

src/mixins/customMixin.ts

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

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

within src/main.ts

import CustomValues from "@/mixins/CustomValues";
Vue.mixin(CustomValues)

inside your src/shims-tsx.d.ts file

// Add the variables and functions to the Vue interface to use them globally.
interface Vue {
  colors,
  strings
}

What is the method to utilize global mixin methods within a TypeScript Vue component?

Content of global.mixin.js:

Contents of main.ts:

Content of Test.vue:

Answer №1

src/mixin.ts:

src/App.vue:

Answer №2

src/mixins/customMixin.ts

within src/main.ts

inside your src/shims-tsx.d.ts file

Similar questions

Is the jqm flipswitch with the label on the left and the switch on the right?

Verification reset post form submission

The zoom level on Google Maps adjusts based on the size of the window when it

Display the tooltip only when the checkbox is disabled in AngularJS

Programmatically show/hide legend items in amCharts 4

Reusing Angular routes across different modules for backbutton functionality

Encountering Unmet Dependency Issue When Running 'npm install' on Laravel in Windows 8

The useEffect hook in ReactJs is triggering multiple times

how to put an end to sequential animations in React Native

Interactive canvas artwork featuring particles

Transitioning away from bower in the latest 2.15.1 ember-cli update

The title tag's ng-bind should be placed outside of the element

JSON error: Encountered an unexpected token "o" while processing

Deactivate a setInterval function within a Vue.js component

Incorporating React-Native components into a Next.js application within an Nx monorepository: A Step-by-Step

Neglecting a light source in the Three.js framework

Show the total sum of a specific column in a datatable and enable the option to export the data to an Excel

Understanding the functionality of app.listen() and app.get() in the context of Express and Hapi

The 'required' validator in Mongoose seems to be malfunctioning

In an Electron-Vue application, where is the storage location for the application state?