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

只能在computed中定义的函数中进行访问。状态一旦发生任何变化，就会重新评估在configure中定义的所有功能。

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

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

链接到官方文档：

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

https://vuex.vuejs.org/

如何在Vuejs 2中声明全局方法/对象？

1 个答案: