在 js 文件中使用 vuejs mixins答案

【问题标题】：using vuejs mixins in js file在 js 文件中使用 vuejs mixins
【发布时间】：2020-06-11 15:36:59
【问题描述】：

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

main.js

Vue.mixin({

   methods: {
        test: function () {
            return 1;
        },
   }
});

Vue 组件

//this works
    async created() {
        alert(this.test());
    }

services.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，我在互联网上查看但找不到与此相关的任何内容

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

// mixin.js

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

除了将其添加到 vue 之外，只需创建一个对象（并可能将其标记为导出）。

它只是一个对象。它里面有computed、data等特殊名称，但它只是一个对象。

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

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

现在，如果您真的需要一个全局 mixin，这就是它的用途，但请注意，要在 vue export default 之外使用 myMixin，您需要通过全局范围访问它，例如 window，或者像上面一样导入它。有关详细信息，请参阅以下查询：global functions in js。

我的偏好：

// in a file at /path/to/index.js
export { myMixin1 } from './myMixin1' // ...

// usage.vue
import { myMixin1, myMixin2 } from './path/to'
export default { mixins: [ ... ] }

或者在需要的地方，（因为 mixins 可以包含其他 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'

祝你好运

【讨论】：

【解决方案2】：

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

main.js

export default new Vue({
    mixins: [YourMixin]
    ...
})

somecode.js

import vue from ‚./main.js‘

vue.method()

编辑：建议

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

【讨论】：

即使全局是为了分离关注点，我也希望它在 mixin 中的原因。（虽然我不做全局混合。）当我的方法和计算没有相互绊倒时，考虑这个问题会更简单。这个问题被 vue 按类型（方法、数据...）而不是关注（我的模态、我的计算）分离的方法放大了。
我明白了，虽然在 Mixins 中你倾向于扩展 vue 组件，比如定义新的属性。我认为如果你有一个引用 this.$store 的计算属性并在 vue 组件的上下文之外使用该属性，那么 mixin 会中断，你不同意吗？
是的——所以不要。相反：A = generic funcs，B = vuex funcs，C = A + B。看起来很合理，不是吗？此外，始终边缘化框架/插件（请参阅此处的完整论点youtu.be/2dKZ-dWaCiU?t=4030，很棒的演讲，但链接恰好指向论点），因此无论如何做这样的分离对我来说似乎很聪明。
顺便说一句，vuex 可以在js中使用。只需导入它。在您的示例中，this.$... 会破坏代码。如果你例如。 import { file } from '~/base' 其中file 是一个带有set: (v) => store.commit ... 之类的道具的对象（并将存储导入到其文件中，例如base/index.js）你没有这样的问题。（作为 Bob 描述的建筑边界的一个例子）。所以最后你做file.set ...而不是this.$store.commit ...只是为了开始，你也可以做很多更整洁的事情。并且不需要映射 getter 和 setter..
确实很棒的演讲。我并不是说在 vue 意义上这样做是错误的，我只是想指出，如果它没有连接到组件中，它就是一个日常的单例“服务”对象。这已经足够了。我通常不会把这样的对象变成 mixin，但这不是重点。我仍然同意你的观点，一个人只需要在考虑到限制的情况下使用它。

【解决方案3】：

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

【讨论】：