Using Global module object within Vue instance methods

Question

I'm trying to create a global object I can use in Vue but having trouble accessing the methods. I want to use these methods in different components. Also, what's the best approach. I heard about using Mixins but I was thinking about trying a basic javascript object. I hope I'm asking this question the right way.

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>

`myobject.js` is a function, which declares a function in its body, which isn't returned. You won't be able to import it. — Emile Bergeron, Apr 18 '18 at 15:23
I've copy that code doing some research online. Do you know what's the best approach? — ifelse, Apr 18 '18 at 15:28
I wrote an answer which shows how to export both named and default exports. — Emile Bergeron, Apr 18 '18 at 15:29

score 4 · Accepted Answer · edited Jul 15 '22 at 21:36

To create a simple ES module that exports both named functions and a default object, you can define it like this:

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

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

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

Then, it will be possible to import it:

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

Now, to use it in your Vue components, there are multiple ways which I already explained in another answer. Using Vue mixins is one way (beware of global mixins) and writing a plugin is another way.

In your case, it could be a simple mixin:

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

The reason your code doesn't work is because you're exporting a function which does nothing. testMethod isn't exposed, it's just declared within the exported function as a local function.

@ifelse See my other [answer about mixins](https://stackoverflow.com/a/49743285/1218980). — Emile Bergeron, Apr 18 '18 at 15:37
Last question hopefully. How to export object with multi methods that I can call ? — ifelse, Apr 18 '18 at 15:38
I want to use something like var myObj = { methodOne: function() { //Do this }, methodTwo: function() { //Do that } } and call it like myObj.methodOne — ifelse, Apr 18 '18 at 15:44

Using Global module object within Vue instance methods

1 Answers1