javascript - 如何在 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

要分发纯函数(无副作用)，您可以使用 mixins。

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

然后你可以在vue实例中定义mixin:

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

访问只能在计算中定义的函数中完成。一旦状态发生任何变化，计算中定义的所有函数都会再次计算。

现在您可以获取主文件中的数据并提交结果:

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

官方文档链接:

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

https://vuex.vuejs.org/