javascript - 在 Vue 实例方法中使用全局模块对象

Question

我正在尝试创建一个可以在 Vue 中使用的全局对象，但在访问这些方法时遇到了问题。我想在不同的组件中使用这些方法。另外，最好的方法是什么。我听说过使用 Mixins，但我正在考虑尝试一个基本的 javascript 对象。我希望我以正确的方式问这个问题。

src/myobject.js

 exports.myObj = () => {
  function testMethod() {
   console.log('working');
  }
}

源代码/main.js

import Vue from 'vue'
import App from './App'
import { store } from './store/store'
import { myObj } from './myobject'

Vue.config.productionTip = false

myObj.testMethod() // NOT WORKING - TypeError: __WEBPACK_IMPORTED_MODULE_3_

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store: store,
  components: { App },
  template: '<App/>'
})

src/components/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
  </div>
</template>

<script>

export default {
  name: 'App',
  mounted: function () {
      myObj.testMethod() // NOT WORKING
  },
  components: {
  }
}
</script>

<style>
body {
  margin: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

Answer 1

要创建一个导出命名函数和默认对象的简单 ES 模块，您可以这样定义它:

export function testMethod() {
  console.log('working');
}

export function otherMethod() {
  console.log('other method');
}

// optionally export a default object
export default { 
  testMethod,
  otherMethod
}

然后，就可以导入它了:

import { testMethod } from './myobject';
// or import the default export
import myObj from './myobject';
myObj.testMethod();

现在，到use it in your Vue components ，我已经在另一个答案中解释了多种方式。使用Vue mixins是一种方式(提防全局混合)和writing a plugin是另一种方式。

在您的情况下，它可能是一个简单的混合:

// my-mixin.js
import { testMethod } from './myobject';

export default {
  mounted() {
    testMethod();
  }
}

Hook functions with the same name are merged into an array so that all of them will be called.

<script>
// components/App.vue
import MyMixin from '../my-mixin'

export default {
  name: 'App',
  mixins: [MyMixin],
  mounted() {
    console.log('both this function and the mixin one will be called');
  },
  components: {
  }
}
</script>

---

您的代码不起作用的原因是因为您正在导出一个不执行任何操作的函数。 testMethod 没有公开，它只是在导出函数中声明为本地函数。