VUE3+mqtt封装，解决多页面使用需重复连接等问题

如光不息丶

已于 2022-11-21 11:32:46 修改

阅读量5.5k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 mqtt

于 2022-11-21 11:29:11 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42088314/article/details/127958093

本文介绍了如何在Vue3项目中封装mqtt服务，以解决多页面重复连接和配置的问题。通过将mqtt服务整合到Vuex中，确保连接和订阅只需进行一次，接收的消息存储在Vuex中方便共享。详细步骤包括安装mqtt.js、暴露Vue实例、编写mqtt配置文件以及在页面中引入和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：在做的一个项目中多个页面都需要使用到mqtt接收消息，但这样的话每个页面就都需要连接一次mqtt，并且要再次配置options信息、订阅主题、接收消息，非常的不方便，因此琢磨将mqtt封装到vuex中，使其可以多页面通用，这样只需要连接订阅一次，接收到的消息可以存储在vuex中。
mqtt在线测试工具：http://www.emqx.io/online-mqtt-client

一、安装mqtt

npm install mqtt

二、暴露出main.js中的vue实例

使用export default暴露出app

import {
   
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.use(ElementPlus)
app.use(store).use(router).mount('#app')

export default app

三、封装mqtt

将mqtt服务封装到VUEX中，可以解决多页面需要用到mqtt接收消息时，每个页面都要再次配置、连接、订阅主题等问题

import {
   
    createStore } from 'vuex'
import main from "../main";//main.ts文件中要暴露app
import router from '@/router';// 引入vuex
export default createStore({
   
   
  state: {
   
   
    topics: [],//订阅话题
  },
  mutations: {
   
   
    //mqtt服务
    MQTT_SERVICE(state, event){
   
   
      // mqtt连接成功
      main.config.globalProperties.$mqtt.on('connect', (e) => {
   
   
        console.log('连接成功:', e)
        // console.log(state.topics)
        main.config.</