web-dev-qa-db-ja.com

typescriptでvueでMixinsを使用できません

このようなフォルダ構造があります

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

group.vueのスクリプト

<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のコード

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

ここで2つの問題に直面しています。

最初に、私が../../を使用したtsファイルをインポートするには、。/または@ /を使用する方法があります。 lang = "ts"を使用しなくても、次のようなjsファイルをインポートできます@/services/...

次に、groupmixin.tsで宣言した変数testにアクセスできません。

typescriptvue.jsvue-mixin
9
Sam

ミックスインを機能させるには、次のことを試してください。

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'
}

import Vue from 'vue';を使用したVueのインポートを使用している理由があります。主な理由は、一部のIDEがVueのような$emitのような関数を強調表示しているためですvue-class-componentからインポートされました。

インポートtsファイルについては、vue-cliを使用していない場合は webpack's resolve alias および tsconfig.json をセットアップする必要があります。 tsconfig-paths を使用する必要があります

3
Marlon Barcarol

@ Joe Irbyの回答 に基づいて、vue-typed-mixinsがなくても機能することがわかりました。

ミックスインがVueを拡張すると、ミックスインを拡張してコンポーネントを作成できます。

// 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>
0
Finrod

TypeScriptプロジェクトでVue mixinsを動作させる方法を理解するために、今日は多くの時間を費やしました。ミックスインを使用するためのチュートリアルで言う通常の方法はすべてTypeScriptでは機能しないようです。 。VueフレームワークのミックスインコードはTypeScript対応ではないため、コンポーネントはミックスインで定義されたプロパティにアクセスできません。

最終的に、TypeScriptでミックスインを動作させる方法を見つけました。実際、本当にうまく機能しています。私のプロジェクトには複数のレベルのミックスイン継承があり、ミックスインは他のミックスインを拡張しており、すべて期待どおりに機能します。秘密は、TypeScriptのミックスインを修正するために誰かが書いた次のサードパーティパッケージをインストールする必要があることです。

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

警告のいくつかの単語（しかしどちらも大したことではありません）：

  1. このプラグインは、ミックスインを.vueファイルではなく.tsファイルで定義した場合にのみ機能します。私のミックスインにはコードのみが含まれており、htmlやcssは含まれていないため、これは私にとって問題ではありませんでした（そして、それが意味をなすような状況を考えることはできません）。

  2. コンポーネントにミックスインを含める場合は、パッケージのWebサイトの例（上記のURL）と同じ方法で実行してください。サイトの例に従ってコードをリファクタリングせずにパッケージをインストールするだけでは機能しません。

以下に簡単な例を示します。

// /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);
        }
    }
});

これは次に使用されます。

// /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>
0
Joe Irby