无法在带有打字稿的vue中使用Mixins

时间：2018-08-16 08:47:33

标签： typescript vue.js vue-mixin

我有这样的文件夹结构

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

第二，无法访问我在groupmixin.ts中声明的变量测试。

7 个答案:

答案 0 :(得分：7)

基于{{3}}，我刚刚发现它在不使用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>

答案 1 :(得分：5)

请尝试执行以下操作以使Mixin正常工作：

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从$emit导入时会突出显示vue-class-component之类的Vue函数。

对于导入ts文件，如果您不使用vue-cli，则需要设置webpack's resolve alias以及tsconfig.json中，并且可能需要使用tsconfig-paths < / p>

答案 2 :(得分：2)

如果你不使用 vue-class-component（目前我不是因为它没有 work well 与 setup/composition api）你可以使用 defineComponent 作为 mixin，它可以在 vue 3 中使用 typescript

mixin 示例：

yor_mixin.ts

import {defineComponent} from "vue"

interface MixinState{
    lastScrollPosition: number;
}

export default defineComponent({
    data(): MixinState{
        return {
            lastScrollPosition: 0,
        }
    },
    methods:{
        scrollDisable(){
            document.body.style.overflow = "hidden";
            this.lastScrollPosition = window.pageYOffset;
        },
        scrollEnable(){
            document.body.style.overflow = "auto";
            window.scrollTo(0, this.lastScrollPosition)
        }
    }
})

和组件


<script lang="ts">
import {computed, defineComponent} from 'vue';
import {useStore, MUTATIONS} from "@/store";
import scrollDisableMixin from "@/mixins/scrollDisable";

export default defineComponent({
  mixins: [scrollDisableMixin],

  setup(){
    const store = useStore();
    return {
      expanded: computed(() => store.state.menu.expanded),
      toggle: () => store.commit(MUTATIONS.TOGGLE_MENU_MAIN),
    }
  },

  watch: {
    expanded: function(){
      this.expanded ? this.scrollDisable() :this.scrollEnable();
    }
  }

})

答案 3 :(得分：1)

我今天花了很多时间试图弄清楚如何使Vue mixins在TypeScript项目中工作。显然，这些教程说的使用mixins的所有普通方法根本无法在TypeScript中使用。这些组件无权访问其混合模块中定义的属性，因为显然Vue框架的混合模块代码对TypeScript不友好。

最终，我确实找到了一种在TypeScript中使mixins工作的方法。实际上工作得很好。我的项目中有多个级别的mixin继承，mixin扩展了其他mixin，所有这些都完全按照我的预期工作。秘密是我必须安装有人写的用于修复TypeScript中的mixins的第三方软件包：

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

加上警告语（但没什么大不了的）：

  1. 仅当我在.ts文件而不是.vue文件中定义mixins时，此插件才对我有用。这对我来说不是问题，因为我的mixins仅包含代码，不包含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>

答案 4 :(得分：0)

截止到今天，有两种方法可以将Mixin与Typescript / Vue结合使用：

  1. 如果您的mixin仅包含变量：
// mixins/title.ts
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class titleMixin extends Vue {
  public test: string = 'Hello, hello, hello'
}

// Page.vue
import { Component, Vue, Mixins } from 'vue-property-decorator'
import titleMixin from '@/mixins/title'

export default class Page extends Mixins(titleMixin) {
  private mounted(): void {
    console.log(this.test) // would print: Hello, hello, hello
  }
}
  1. 如果您使用生命周期挂钩：
// mixins/title.ts
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class titleMixin extends Vue {
  private mounted(): void {
    console.log('somevalue')
  }
}

// Page.vue
import { Component, Vue } from 'vue-property-decorator'
import titleMixin from '@/mixins/title'

@Component({
  mixins: [titleMixin]
})
export default class Page extends Vue {} // this will print console.log

这样对我有用。您可以看一下“ vue-class-component”包：https://github.com/vuejs/vue-class-component/blob/master/test/test.ts#L389

答案 5 :(得分：0)

mixins.ts 

import { Vue, Component } from "vue-property-decorator";

@Component
export default class Mixin extends Vue {
  public perfectScrollbarSetting: object = {
    maxScrollbarLength: 750
  };
  public widthClient: number = 0;
  public heightClient: number = 0;
}

文件About.vue 

<template>
</template>
<script lang="ts">
import { Vue, Component, Mixins } from "vue-property-decorator";
import { generalInfo } from "../../store/modules/general";
import Mixin from "../../mixin/mixins";
@Component({
  mixins: [Mixin]
})
export default class About extends Mixins(Mixin) {
  mounted() {
    console.log(this.widthClient) //it's work
  }

}
</script>

答案 6 :(得分：0)

作为 mixin 的缺点，为什么不尝试对 Vue3 的设置进行 mixins 重构： https://codesandbox.io/s/delicate-sea-0xmim?file=/src/components/HelloWorld.vue:2262-2495 Comp.vue

export default {
  name: "HelloWorld",
  setup() {
    const { test } = useGroup();
    console.log(test);
    return Object.assign({}, useGroup());
  },
  mounted() {
    this.compRef = this;
  },
  props: {
    msg: String,
  },
};

UseGroup.js

import { ref, nextTick, onMounted } from "vue";

export default () => {
  const compRef = ref(null);
  const test = "Hello World!";

  onMounted(() => {
    nextTick(() => {
      if (compRef.value) {
        const vm = compRef.value;
        console.log(vm.$el, vm.msg);
      }
    });
  });
  return {
    test,
    compRef
  };
};
相关问题
最新问题