Как объявить глобальные методы / объекты в Vuejs 2?

Question

У меня есть экземпляр Vue, где я хочу сделать доступными для всех компонентов некоторые

• методы
• объекты

Я написал это:

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
});

К сожалению, в моих компонентах я не могу достичь ни foo, ни mqtt.

<template>

</template>
<script>

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

Что не так?

Answer 1

Для распределения чистых функций (без побочных эффектов) вы можете использовать миксины.

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

Затем вы можете определить миксин в экземпляре vue:

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

Эта функция теперь можетиспользовать в каждом компоненте, как если бы он там был определен.

Ваше соединение с mqtt - совсем другая история.Вы делитесь результатом mqtt.connect.Эта функция не возвращает функцию, поэтому ее нельзя использовать с помощью методов.Кроме того: эта функция создает состояние.Хороший способ поделиться состоянием - Vuex.С помощью Vuex вы можете совместно использовать состояние для нескольких компонентов и определять мутации.

Определить магазин в src/store/index.js:

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

Добавить его в свое приложение:

import store from './store'

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

Теперь вы можете получить доступ к этому хранилищу в каждом компоненте с помощью:

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

Доступ должен осуществляться только в функциях, определенных в computed.Как только в состоянии происходит какое-либо изменение, все функции, определенные в computed, снова оцениваются.

Теперь вы можете получить данные в главном файле и зафиксировать результат:

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

Ссылкик официальным документам:

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

https://vuex.vuejs.org/