无法在带类型记录的vue中使用Mixins

Question

我有这样的文件夹结构

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

我在这里面临两个问题。

首先，要导入我使用的./ ./的ts文件，有什么方法可以使用./或@/。不使用lang="ts"，我可以导入这样的js文件：@/services/.

第二，无法访问我在中声明的varaible 测试。

Answer 1

我今天花了很多时间试图弄清楚如何让Vue mixins在TypeScript项目中工作。显然，教程中提到的使用mixins的所有正常方式在TypeScript中都是行不通的。组件无法访问在它们的混合器中定义的属性，因为显然Vue框架的混合代码并不是类型友好的。

最后，我找到了一种在TypeScript中使用mixins的方法。实际上工作得很好。在我的项目中，我有多个级别的mixin继承，混合继承扩展了其他mixin，而且这一切都与我所期望的完全相同。秘密是，我必须安装一个第三方包，这是有人为修复TypeScript中的混合程序而编写的：

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

几个警告词(但这两句话都不是什么大事)：

1. 这个插件只适用于我在.ts文件而不是.vue文件中定义混合文件的情况下。这对我来说不是个问题，因为我的混合器只包含代码，没有html或css (我想不出有什么意义)。
2. 当您在组件上包含一个混合器时，请确保您以与包的网站上的示例相同的方式执行它(上面的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>

Answer 2

请试着做以下工作，使您的混音工作：

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

我之所以使用使用Vue导入import Vue from 'vue';的原因，主要是因为一些IDE在从vue-class-component导入Vue函数时突出显示了Vue函数，比如$emit。

至于导入ts文件，如果不使用vue-cli，则需要设置webpack的决心化名，也需要在tsconfig.json中安装，可能还需要使用tsconfig-路径

Answer 3

基于@Joe Irby的回答，我发现它不需要vue类型的混联器就能工作。

在mixin扩展Vue时，您可以通过扩展mixin来创建组件：

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