vue.js - typescript ile vue'da Mixin'leri kullanamama

Böyle bir klasör yapım var

--Page    
   -group.vue    
--Services
  -groupMixin.ts

group.vue dosyasının script kısmı

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

     import { GroupMixin } from '../../services/groupMixin';
     @Component
     export default class Group extends Mixins(GroupMixin) {
        created () {
          console.log(this.test)
        }
      }
</script>

groupMixin.ts dosyasının kodu

import { Vue } from 'vue-property-decorator'
//creating mixins.
export class GroupMixin extends Vue {
  test: string = 'sss'
}

Burada iki sorunla karşı karşıyayım.

Öncelikle, bir ts dosyasını içe aktarmak için ../../ kullandım, ./ veya @/ kullanmanın bir yolu var mı? lang="ts" kullanmadan, bir js dosyasını bu şekilde içe aktarabilirim @/services/...

İkinci olarak, groupmixin.ts dosyasında ilan ettiğim test değişkenine erişemiyorum.

Cevap #1

Bugün Vue mixin'lerini bir TypeScript projesinde nasıl çalıştırabileceğimi anlamaya çalışarak çok zaman harcadım. Görünüşe göre öğreticilerin mixin'leri kullanmak için söylediği tüm normal yöntemler TypeScript'te basitçe çalışmıyor. Bileşenler, mixin'lerinde tanımlı olan özelliklere erişemiyor çünkü görünüşe göre Vue çerçevesinin mixin kodu TypeScript dostu değil.

Sonunda, TypeScript'te mixin'lerin çalışmasını sağlayacak bir yol buldum. Aslında, gerçekten çok iyi çalışıyor. Projemde birden fazla seviyede mixin kalıtımı var, mixin'ler diğer mixin'leri genişletiyor ve hepsi tam olarak beklediğim gibi çalışıyor. Sır, TypeScript'teki mixin'leri düzeltmek için birinin yazdığı bu üçüncü taraf paketi kurmam gerektiği idi:

https://www.npmjs.com/package/vue-typed-mixins

Bir iki uyarı kelimesi (ama hiçbiri büyük bir sorun değil):

  1. Bu eklenti sadece mixin'lerimi .vue dosyaları yerine .ts dosyalarında tanımlarsam benim için çalışıyor. Bu benim için bir sorun değildi çünkü mixin'lerim sadece kod içeriyor, html veya css içermiyor (ve bunun mantıklı olacağı bir durum bir türlü aklıma gelmiyor).

  2. Bir bileşene bir mixin eklediğinizde, bunu paketin web sitesindeki örnekle (yukarıdaki URL) aynı şekilde yaptığınızdan emin olun. Eğer sadece paketi kurar ve sitenizdeki örneğe uymak için kodunuzu yeniden düzenlemezseniz, çalışmaz.

İşte basit bir örnek:

// /src/mixins/MyMixin.ts

import Vue from "vue";

export default Vue.extend({
    data: function () {
        return {
            mixinMessage: "this came from MyMixin!"
        };
    },
    created: function () {
        console.log("MyMixin.created()");
    },
    mounted: function () {
        console.log("MyMixin.mounted()");
    },
    methods: {
        mixinOutput: function (text:string) {
            console.log("mixin says: " + text);
        }
    }
});

Daha sonra şunlar tarafından kullanılır:

// /src/components/MyComponent.vue

<template>
    <div>
        whatever
    </div>
</template>

<style>
    /* whatever */
</style>

<script lang="ts">
    import mixins from "vue-typed-mixins";
    import MyMixin from "../mixins/MyMixin";

    export default mixins(MyMixin).extend({
        created: function () {
            console.log("MyComponent.created()");
        },
        mounted: function () {
            console.log("MyComponent.mounted()");

            this.mixinOutput("hello from MyComponent");
            this.mixinOutput(this.mixinMessage);
        }
    });
</script>

Cevap #2

@Joe Irby'nin cevabına dayanarak, bunun vue-typed-mixins olmadan çalıştığını yeni fark ettim.

Mixin'iniz Vue'yu genişlettiği için, mixin'inizi genişleterek bileşeninizi oluşturabilirsiniz:

// MyMixin.ts

import Vue from "vue";

export default Vue.extend({
    data: function () {
        return {
            message: "Message from MyMixin!"
        };
    }
});


// MyComponent.vue

<template>
    ...
</template>

<script lang="ts">
    import MyMixin from "@/mixins/MyMixin";

    export default MyMixin.extend({
        mounted: function () {
            console.log(this.message);
        }
    });
</script>

Cevap #3

Mixin'inizin çalışması için lütfen aşağıdakileri yapmayı deneyin:

group.vue

<script lang="ts">
 import Vue from 'vue';
 // mixins only exist in `vue-class-component` and Component is a default export.
 import Component, { mixins } from 'vue-class-component';

 import { GroupMixin } from '../Services/groupMixin';

 @Component
 export default class Group extends mixins(GroupMixin) {
    created () {
      console.log(this.test)
    }
  }
</script>

groupMixin.ts

import { Vue } from 'vue'

export class GroupMixin extends Vue {
  test: string = 'sss'
}

Ben Vue'yi import Vue from 'vue'; kullanarak içe aktarmamın bir nedeni var, bunun başlıca sebebi bazı IDE'lerin Vue işlevlerini, örneğin $emit'i, vue-class-component'ten içe aktarıldığında vurgulaması.

TS dosyalarını içe aktarma konusunda, eğer vue-cli kullanmıyorsanız, webpack'in resolve alias'ını ve ayrıca tsconfig.json dosyanızı ayarlamanız gerekecektir ve muhtemelen tsconfig-paths kullanmanız da gerekebilir

İlgili makaleler