无法在带有打字稿的 vue 中使用 Mixins [英] unable to use Mixins in vue with typescript

问题描述

我有这样的文件夹结构

--页面-group.vue- 服务-groupMixin.ts

group.vue 脚本

groupMixin.ts 代码

import { Vue } from 'vue-property-decorator'//创建混合.导出类 GroupMixin 扩展 Vue {测试:字符串 = 'sss'}

我在这里面临两个问题.

首先，要导入我使用../../的ts文件，有没有办法使用./或@/.在不使用 lang="ts" 的情况下，我可以导入这样的 js 文件 @/services/...

其次，无法访问我在 groupmixin.ts 中声明的变量 test.

解决方案

今天我花了很多时间试图弄清楚如何让 Vue mixins 在 TypeScript 项目中工作.显然，教程中所说的使用 mixin 的所有正常方法在 TypeScript 中都不起作用.组件无法访问其 mixin 中定义的属性，因为 Vue 框架的 mixin 代码显然不是 TypeScript 友好的.

最终，我确实找到了一种让 mixin 在 TypeScript 中工作的方法.事实上，工作得很好.我的项目中有多个级别的 mixin 继承，mixin 扩展了其他 mixin，并且一切都按照我的预期工作.秘诀是我必须安装这个有人写的第三方包来修复 TypeScript 中的 mixin:

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

几个警告词(但都不是什么大问题):

1. 这个插件只适用于我在 .ts 文件而不是 .vue 文件中定义我的 mixins 的情况.这对我来说不是问题，因为我的 mixins 只包含代码，没有 html 或 css(而且我想不出有什么意义的情况).

2. 当您在组件中包含 mixin 时，请确保按照与包网站(上面的网址)上的示例相同的方式进行操作.如果您只是安装软件包而不重构您的代码以按照网站上的示例进行操作，它将无法正常工作.

这是一个简单的例子:

///src/mixins/MyMixin.ts从vue"导入Vue；导出默认 Vue.extend({数据:函数(){返回 {mixinMessage: "这来自 MyMixin！"};},创建:函数(){console.log("MyMixin.created()");},挂载:函数(){console.log("MyMixin.mounted()");},方法: {混合输出:函数(​​文本:字符串){console.log("mixin 说:" + text);}}});

然后被使用:

///src/components/MyComponent.vue<模板><div>任何

</模板><风格>/* 任何 */</风格><script lang="ts">从vue-typed-mixins"导入mixin；从../mixins/MyMixin"导入 MyMixin；导出默认 mixins(MyMixin).extend({创建:函数(){console.log("MyComponent.created()");},挂载:函数(){console.log("MyComponent.mounted()");this.mixinOutput("Hello from MyComponent");this.mixinOutput(this.mixinMessage);}});

I have a folder structure like this

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

script of 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>

code of groupMixin.ts

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

I am facing two problems here.

First, to import a ts file i used ../../, is there any way to use ./ or @/. Without using lang="ts", i can import a js file like this @/services/...

Second, not able to access the varaible test which i declared in groupmixin.ts.

解决方案

I spent a lot of time today trying to figure out how to get Vue mixins to work in a TypeScript project. Apparently all the normal ways that the tutorials say to use mixins simply do not work in TypeScript. The components don't have access to the properties defined in their mixins because apparently the Vue framework's mixin code just isn't TypeScript-friendly.

Eventually, I did find a way to get mixins working in TypeScript. Working really well, in fact. I have multiple levels of mixin inheritance in my project, with mixins extending other mixins, and it all works exactly how I expected it to. The secret was that I had to install this third-party package that someone wrote to fix mixins in TypeScript:

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

Couple words of warning (but neither is a big deal):

1. This plugin only works for me if I define my mixins in .ts files instead of .vue files. This wasn't a problem for me because my mixins only contain code, no html or css (and I can't think of a situation where that would even make sense).

2. When you include a mixin on a component, make sure you do it the same way as the example on the package's website (url above). If you simply install the package without refactoring your code to follow the example on the site, it won't work.

Here's a simple example:

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

Which is then used by:

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

这篇关于无法在带有打字稿的 vue 中使用 Mixins的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！