This time I will bring you a detailed explanation of the Vue Mixin function usage case. What are the precautions for the Vue Mixin function usage case? The following is a practical case, let’s take a look.

vuejs official organization has a 'vue-class-component' and the recommended 'vue-property-decorator', but there is no corresponding implementation. After looking through the former issue, there is a feature that has been pending for a long time and is mixin support.

It’s not a complicated thing, just write one yourself.

Later note: vue-class-component 6.2.0 starts to provide mixins method, which is similar to the implementation idea of ​​this article.

Implementation

import Vue, { VueConstructor } from 'vue'
export type VClass = {
 new(): T
} & Pick
/**
 * mixins for class style vue component
 */
function Mixins(c: VClass): VClass
function Mixins(c: VClass, c1: VClass): VClass
function Mixins(c: VClass, c1: VClass, c2: VClass): VClass
function Mixins(c: VClass, ...traits: Array>): VClass {
 return c.extend({
  mixins: traits
 })
}

Declare VClass as a class constructor for T. At the same time, the static methods (extend/mixin and the like) on Vue's constructor are obtained through Pick, so that the real implementation in the following paragraph can be supported. A new subclass is generated by calling the extend method on a Vue subclass constructor. Class constructor.

function Mixins(c: VClass, ...traits: Array>): VClass {
 return c.extend({
  mixins: traits
 })
}

As for ABC, this is purely a manual job of type declaration.

Usage

In actual use:

import { Component, Vue } from 'vue-property-decorator'
import { Mixins } from '../../util/mixins'
@Component
class PageMixin extends Vue {
 title = 'Test Page'
 redirectTo(path: string) {
  console.log('calling reidrectTo', path)
  this.$router.push({ path })
 }
}
interface IDisposable {
 dispose(...args: any[]): any
}
class DisposableMixin extends Vue {
 _disposables: IDisposable[]
 created() {
  console.log('disposable mixin created');
  this._disposables = []
 }
 beforeDestroy() {
  console.log('about to clear disposables')
  this._disposables.map((d) => {
   d.dispose()
  })
  delete this._disposables
 }
 registerDisposable(d: IDisposable) {
  this._disposables.push(d)
 }
}
@Component({
 template: `
 

  
{{ title }}
  
Counted: {{ counter }}
 

 `
})
export default class TimerPage extends Mixins(PageMixin, DisposableMixin) {
 counter = 0
 mounted() {
  const timer = setInterval(() => {
   if (this.counter++ >= 3) {
    return this.redirectTo('/otherpage')
   }
   console.log('count to', this.counter);
  }, 1000)
  this.registerDisposable({
   dispose() {
    clearInterval(timer)
   }
  })
 }
}
count to 1
count to 2
count to 3
calling reidrectTo /otherpage
about to clear disposables

Notice that the DisposableMixin that directly extends Vue is not a valid Vue component, nor can it be used directly Used in the mixins option, if it is to be used by a custom component extended by Vue.extend, remember to use Component to wrap it up.

const ExtendedComponent = Vue.extend({
 name: 'ExtendedComponent',
 mixins: [Component(DisposableMixin)],
})

Abstract class

Mixins used in business systems are actually more complex in most cases, providing some basic functions, but some parts need to be left to the successors to implement themselves. At this time Using abstract classes is appropriate.

abstract class AbstractMusicPlayer extends Vue {
 abstract audioSrc: string
 playing = false
 togglePlay() {
  this.playing = !this.playing
 }
}
class MusicPlayerA extends AbstractMusicPlayer {
 audioSrc = '/audio-a.mp3'
}
class MusicPlayerB extends AbstractMusicPlayer {
 staticBase = '/statics'
 get audioSrc() {
  return `${this.staticBase}/audio-b.mp3`
 }
}

But abstract classes cannot be instantiated and do not meet the requirement of { new(): T }, so they can only be inherited and cannot be mixed in. Due to the same The reason is that abstract classes cannot be decorated by the Component function of 'vue-class-component'.

At this time, we have to write the implemented functions into Mixin, and put the functions to be implemented into the interface and let the specific class implement them.

interface IMusicSourceProvider {
 audioSrc: string
}
/**
 * @implements IPlayerImplementation
 */
class PlayerMixin extends Vue {
 /** @abstract */
 audioSrc: string
 logSrc() {
  console.log(this.audioSrc)
 }
}
interface IPlayerImplementation extends IMusicSourceProvider {}
class RealPlayer extends Mixins(PlayerMixin) implements IPlayerImplementation {
 audioSrc = '/audio-c.mp3'
}

This way of deceiving the compiler is actually quite clumsy. If a specific class inherits PlayerMixin but does not explicitly declare to implement IPlayerImplementation, the compiler cannot tell you this error. We can only carefully write comments in the code and hope that users will not forget this.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Progressbar component practical case analysis

Implementation of address book initial letter search function