Question

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

的src / myobject.js

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

src / 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();
  }
}

将具有相同名称的钩子函数合并到一个数组中，以便调用所有这些函数。

<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未公开，它只是在导出的函数中声明为本地函数。

在Vue实例方法中使用Global模块对象

1 个答案: