using vuejs mixins in js file

Question

我有一个系统，我必须设置一些可重用的函数来在整个应用程序中使用，现在我已经在我的主文件中创建了一个vue mixin，现在当我从vue组件调用该函数时，它工作得很好，但是当我尝试在js文件中调用相同的函数时，我得到一个错误，这是我的代码main.jsundefined

主要.js

Vue.mixin({

   methods: {

        test: function () {

            return 1;

        },

   }

});

维尤组件

//this works

    async created() {

        alert(this.test());

    }

服务.js

import { API } from 'aws-amplify';

import { Auth } from "aws-amplify";

import axios from 'axios'

export default {

somefunction(){

//this doesnot work

 alert(this.test());

}

}

有人可以告诉我如何在常规js文件中使用vue mixins，我在互联网上查找，但找不到与此相关的任何内容

Answer 1

// mixin.jsexport myMixin = { computed: { foo(): 'hi' } }只需创建一个对象（并可能将其标记为导出），然后将其添加到 vue 中即可。它只是一个对象。它有特殊的名称，如 ，等等，但它只是一个对象。computeddata// usage.vueimport { myMixin } from './path/to/myMixin.js'console.log( myMixin.computed.foo ) // hiexport default {&nbsp; mixins: [ myMixin ],&nbsp; computed: { bar(): { this.foo } // hi}在上面的例子中，我没有使用全局 mixin，因为，引用 vue 文档稀疏而谨慎地使用全局 mixin，因为它会影响创建的每个 Vue 实例，包括第三方组件。现在，如果你真的需要一个全局 mixin，这就是为什么它适用于，但请注意，要在 vue 之外使用，你需要通过全局范围访问它，就像 ，或者像上面一样导入它。有关更多信息，请参阅如下查询：js中的全局函数。myMixinexport defaultwindow我的偏好：// in a file at /path/to/index.jsexport { myMixin1 } from './myMixin1' // ...// usage.vueimport { myMixin1, myMixin2 } from './path/to'export default { mixins: [ ... ] }或者在需要时，（因为米辛可以包括其他米辛;)尽管我发现在其他JS中使用它们更难export myMixin1 = { ... }export myMixin2 = {&nbsp; mixins: [ myMixin1 ]&nbsp; // ...}// usage.vueimport { myMixin2 } from 'path/to/myMixins'export default {&nbsp; mixins: [ myMixin2 ] // contains both 1 and 2}请注意，您也可以在 Vue 文件（单个文件组件）中声明，然后从中导入，就像它们是 Javascript 一样。此外，您（显然）不需要导出它们 - 它们对于分离关注点已经很有用。// example.vue<script>&nbsp; export myMixin = { ... }&nbsp; // all mixins can interact with each other&nbsp; // because in the end, they will be parts of the same object&nbsp; myToggle = { ... }&nbsp; mySuperComplicatedBit = { ... }&nbsp; // so B can call this.A&nbsp; export default {&nbsp; &nbsp; mixins: [&nbsp; &nbsp; &nbsp; myMixin,&nbsp; &nbsp; &nbsp; myToggle,&nbsp; &nbsp; &nbsp; mySuperComplicatedBit&nbsp; &nbsp; ],&nbsp; &nbsp; ...&nbsp; }</script><template> ...// other.vue or other.jsimport { myMixin } from 'path/to/example.vue'干杯，祝你好运

Answer 2

你只能在 Vue 组件中调用 mixin 中的方法。mixin的作用是扩展 vue 组件。我会在单独的服务或实用程序js中从您的mixin中提取逻辑，然后在mixin和服务中使用它.js

Answer 3

如果你的 mixin 是通用的，你可以使用一个全局 mixin 并通过主应用程序访问它。但我真的不明白这一点，那么为什么首先要有一个混合体呢？主要.jsexport default new Vue({&nbsp; &nbsp; mixins: [YourMixin]&nbsp; &nbsp; ...})一些代码.jsimport vue from ‚./main.js‘vue.method()编辑：建议说实话，我宁愿把你的实现转过来，让一个服务公开一个功能，然后通过mixin集成到 Vue 组件中。