How to declare global methods/objects in Vuejs 2?

Question

I have a Vue instance where I want to make accessible to all components some

methods
objects

I wrote this:

import mqtt from 'mqtt'

new Vue({
  el: '#app',
  methods: {
    foo: function() {
      console.log("Hello Foo!");
    }
    mqtt: mqtt.connect('mqtt://server:8083')
  },
  render: h => h(App), 
  router
});

Unfortunately, in my components I cannot reach either foo nor mqtt.

<template>

</template>
<script>

export default {
  data() {
    return {};
  },
  mounted() {
    this.foo(); // Doesn't work
    this.mqtt.on('connect', () => {}) // Doesn't work
  }
}
</script>

What's wrong?

What is the function toto?

mbuechmann
– mbuechmann

2018-11-29 13:33:41 +00:00
Commented Nov 29, 2018 at 13:33 — mbuechmann
– mbuechmann, Commented Nov 29, 2018 at 13:33
My mistake, it was foo

nowox
– nowox

2018-11-29 13:34:15 +00:00
Commented Nov 29, 2018 at 13:34 — nowox
– nowox, Commented Nov 29, 2018 at 13:34

tony19 · Accepted Answer · 2022-07-15 05:50:57Z

4

To distribute pure functions (without side effects) you can use mixins.

const mixin = {
    methods:{
        foo() {
            console.log('foo')
        }
    }
}

Then you can define the mixin in the vue instance:

new Vue({
    mixins: [mixin],
    // ...
})

This function can now be used in every component as if it where defined there.

Your mqtt connection is quite another story. You are sharing the result of mqtt.connect. This function does not return a function, so it cannot be shared via methods. Furthermore: This function creates state. A good way to share state is Vuex. With Vuex you can share state across multiple components and define mutations.

Define a store in src/store/index.js:

const store = new Vuex.Store({
  state: {
    connected: false,
    result: null
  },
  mutations: {
    setMqtt (state, mqttResult) {
      state.connected = true
      state.result = mqttResult
    }
  }
})

Add it to your app:

import store from './store'

new Vue({
  el: '#app',
  mixins: [mixin],
  store,
  // ....
})

Now you can access this store in each component, with:

this.$store.state.connected
this.$store.state.result

The access should only be done in functions that are defined in computed. As soon as any change occurs in the state, all functions defined in computed are evaluated again.

Now you can fetch the data in your main file and commit the result:

mqtt.connect('mqtt://server:8083').on('connect', (someData) => {
    store.commit('setMqtt', someData)
})

Links to the official docs:

https://v2.vuejs.org/v2/guide/mixins.html

https://vuex.vuejs.org/

edited Jul 15, 2022 at 5:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 29, 2018 at 14:17

mbuechmann

5,8195 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

nowox Over a year ago

Thank you for your answer. I am starting the implementation but still, I am far away from using this mounted() {this.foo(); } in my components.

nowox Over a year ago

I guess the solution would be to add the mixins to every components I use or, better, inherit from a component that implements this mixins. Is that correct?

mbuechmann Over a year ago

You can inject it as a global mixin: vuejs.org/v2/guide/mixins.html#Global-Mixin

nowox Over a year ago

Right, but I cannot call the methods from my global mixins into my sub-components. Remember I would like to do mounted() {this.foo(); } from any component of my application.

mbuechmann Over a year ago

Why not? This should be possible. Also, you could define mounted in the mixin.

|

Collectives™ on Stack Overflow

How to declare global methods/objects in Vuejs 2?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related