using vuejs mixins in js file

Question

我有一个系统，我必须设置一些可重用的函数来在整个应用程序中使用，现在我已经在我的主文件中创建了一个vue mixin，现在当我从vue组件调用该函数时，它工作得很好，但是当我尝试在js文件中调用相同的函数时，我得到一个错误，这是我的代码main.jsundefined主要.jsVue.mixin({   methods: {        test: function () {            return 1;        },   }});维尤组件//this works    async created() {        alert(this.test());    }服务.jsimport { 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.js

export myMixin = { computed: { foo(): 'hi' } }

只需创建一个对象（并可能将其标记为导出），然后将其添加到 vue 中即可。

它只是一个对象。它有特殊的名称，如 ，等等，但它只是一个对象。computeddata

// usage.vue

import { myMixin } from './path/to/myMixin.js'

console.log( myMixin.computed.foo ) // hi

export default {

  mixins: [ myMixin ],

  computed: { bar(): { this.foo } // hi

}

在上面的例子中，我没有使用全局 mixin，因为，引用 vue 文档

稀疏而谨慎地使用全局 mixin，因为它会影响创建的每个 Vue 实例，包括第三方组件。

现在，如果你真的需要一个全局 mixin，这就是为什么它适用于，但请注意，要在 vue 之外使用，你需要通过全局范围访问它，就像 ，或者像上面一样导入它。有关更多信息，请参阅如下查询：js中的全局函数。myMixinexport defaultwindow

我的偏好：

// in a file at /path/to/index.js

export { myMixin1 } from './myMixin1' // ...

// usage.vue

import { myMixin1, myMixin2 } from './path/to'

export default { mixins: [ ... ] }

或者在需要时，（因为米辛可以包括其他米辛;)尽管我发现在其他JS中使用它们更难

export myMixin1 = { ... }

export myMixin2 = {

  mixins: [ myMixin1 ]

  // ...

}

// usage.vue

import { myMixin2 } from 'path/to/myMixins'

export default {

  mixins: [ myMixin2 ] // contains both 1 and 2

}

请注意，您也可以在 Vue 文件（单个文件组件）中声明，然后从中导入，就像它们是 Javascript 一样。

此外，您（显然）不需要导出它们 - 它们对于分离关注点已经很有用。

// example.vue

<script>

  export myMixin = { ... }

  // all mixins can interact with each other

  // because in the end, they will be parts of the same object

  myToggle = { ... }

  mySuperComplicatedBit = { ... }

  // so B can call this.A

  export default {

    mixins: [

      myMixin,

      myToggle,

      mySuperComplicatedBit

    ],

    ...

  }

</script>

<template> ...

// other.vue or other.js

import { myMixin } from 'path/to/example.vue'

干杯，祝你好运

Answer 2

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

Answer 3

如果你的 mixin 是通用的，你可以使用一个全局 mixin 并通过主应用程序访问它。但我真的不明白这一点，那么为什么首先要有一个混合体呢？

主要.js

export default new Vue({

    mixins: [YourMixin]

    ...

})

一些代码.js

import vue from ‚./main.js‘

vue.method()

编辑：建议

说实话，我宁愿把你的实现转过来，让一个服务公开一个功能，然后通过mixin集成到 Vue 组件中。