vuex 如何使用 mqqt

在一个 Vue.js 应用程序中使用 Vuex 和 MQTT 协议可以通过以下步骤实现：
首先，您需要安装 mqtt 库。可以使用以下命令进行安装：

npm install mqtt --save

接下来，您需要在 Vuex store 中创建一个模块来处理 MQTT 连接和消息。以下是一个示例模块：

import mqtt from 'mqtt'

const state = {
  client: null,
  isConnected: false
}

const mutations = {
  SET_CLIENT(state, client) {
    state.client = client
  },
  SET_IS_CONNECTED(state, isConnected) {
    state.isConnected = isConnected
  }
}

const actions = {
  connect({ commit }, options) {
    const client = mqtt.connect(options.url, options.options)

    client.on('connect', () => {
      commit('SET_CLIENT', client)
      commit('SET_IS_CONNECTED', true)
    })

    client.on('close', () => {
      commit('SET_IS_CONNECTED', false)
    })
   client.on("message", (topic, message) => {
       
            console.log(`Received message ${message} from topic ${topic}`);
     })

    client.on('error', () => {
      commit('SET_IS_CONNECTED', false)
    })
  },

  disconnect({ state }) {
    if (state.client) {
      state.client.end()
    }
  },

  publish({ state }, { topic, message }) {
    if (state.client && state.isConnected) {
      state.client.publish(topic, message)
    }
  },

  subscribe({ state }, topic) {
    if (state.client && state.isConnected) {
      state.client.subscribe(topic)
    }
  },

  unsubscribe({ state }, topic) {
    if (state.client && state.isConnected) {
      state.client.unsubscribe(topic)
    }
  }
}

export default {
  state,
  mutations,
  actions
}

该模块包含一个 connect 动作，该动作将创建一个 MQTT 连接并将其存储在 Vuex store 中。它还包含一些其他的动作，例如 disconnect、publish、subscribe 和 unsubscribe，这些动作分别用于断开连接、发布消息、订阅主题和取消订阅主题。

在您的 Vue 组件中，您可以使用 mapActions 辅助函数来调用 Vuex store 中的 MQTT 动作。以下是一个示例组件：

<template>
  <div>
    <input v-model="message" />
    <button @click="publishMessage">Publish</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      message: ''
    }
  },

  methods: {
    ...mapActions('mqtt', ['publish']),

    publishMessage() {
      this.publish({
        topic: 'my/topic',
        message: this.message
      })
    }
  }
}
</script>

该组件包含一个输入框和一个“发布”按钮，当用户单击该按钮时，它将调用 publish 动作并将用户输入的消息作为参数传递给它。

最后，您需要在您的应用程序中使用 Vuex.Store 构造函数来创建一个 Vuex store，并将 MQTT 模块添加到该 store 中。以下是一个示例 store：

import Vue from 'vue'
import Vuex from 'vuex'
import mqtt from './mqtt'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        mqtt,
    },
    mutations:{
       
    }
})