[Vue] vue-class-component 형식에서 Mixin 사용하기

src/mixins/list.ts

import { Vue } from 'vue-property-decorator';
import Component from 'vue-class-component';
import store from '@/store/index';

@Component
export default class MixinVue extends Vue  {
  public getList(target: string): void {
    store.dispatch(target);
  }
}

store의 action을 호출하기 위한 mixin 파일

 

 

src/App.vue

<script lang='ts'>
import Vue from 'vue';
import Component from 'vue-class-component';

import mixinsList from '@/mixins/list';  <-- list.ts 파일 임포트

@Component({
  name: 'List',
  mixins: [mixinsList], <-- 믹스인 선언
})
export default class ListVue extends Vue {
  private mixinsList: any = new mixinsList(); <-- 클래스 안에서의 믹스인 선언

  private created(): void {
    this.mixinsList.getList("LIST"); <-- 믹스인 사용
  }
  
}
</script>