# dgiot-mqtt2eventbus

**Repository Path**: zdp_git/dgiot-mqtt2eventbus

## Basic Information

- **Project Name**: dgiot-mqtt2eventbus
- **Description**: 物联网协议微服务，实现vue前端页面的mqtt转vue的消息微服务，让vue各个组件之间通过消息通讯，而不是通过函数调用交互，从而实现代码解耦，类似移动端app的消息通讯架构：消息服务（mqtt）--》 eventbus--》view
- **Primary Language**: Unknown
- **License**: MPL-2.0
- **Default Branch**: master
- **Homepage**: https://github.com/dgiot/dgiot
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 882
- **Created**: 2023-02-20
- **Last Updated**: 2023-02-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dgiot-mqtt-dashboard

<p align="center">
  <img src="https://img.shields.io/github/commit-activity/m/dgiot/dgiot-mqtt-dashboard" alt="ommit-activity">
	<img src="https://badgen.net/badge/package/%40dgiot%2Fdgiot-mqtt-dashboard/blue"
	alt="package" maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://badgen.net/npm/v/@dgiot/dgiot-mqtt-dashboard" alt="Npm Version"
	maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://badgen.net/npm/node/@dgiot/dgiot-mqtt-dashboard" alt="Node Version"
	maxretrytimes="3" class="m-1 transition-all duration-1000">
	<br>
	<img src="https://badgen.net/jsdelivr/hits/npm/@dgiot/dgiot-mqtt-dashboard"
	alt="Jsdeliver Month Downloads" maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://badgen.net/packagephobia/install/@dgiot/dgiot-mqtt-dashboard"
	alt="Install Size" maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://badgen.net/npm/types/@dgiot/dgiot-mqtt-dashboard" alt="Type Support"
	maxretrytimes="3" class="m-1 transition-all duration-1000">
	<br>
	<img src="https://img.shields.io/librariesio/release/npm/@dgiot/dgiot-mqtt-dashboard"
	alt="Outdated Dep" maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://img.shields.io/snyk/vulnerabilities/npm/@dgiot/dgiot-mqtt-dashboard"
	alt="Vulnerablities" maxretrytimes="3" class="m-1 transition-all duration-1000">
  <a href="https://www.npmjs.com/package/@dgiot/dgiot-mqtt-dashboard"><img src="https://img.shields.io/npm/l/@dgiot/dgiot-mqtt-dashboard" alt="License"></a>
<p>


![微服务架构图_02.png](https://dgiot-1253666439.cos.ap-shanghai-fsi.myqcloud.com/shuwa_tech/zh/frontend/web/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E6%9E%B6%E6%9E%84%E5%9B%BE_02.png)




## Installation

```bash
yarn add @dgiot/dgiot-mqtt-dashboard
```

## Quick Start

### [main.js](https://github.com/dgiot/dgiot-Component-example/blob/master/src/main.js)
```diff
  import Vue from 'vue'
  import App from './App.vue'

  +import dgiotStore from '@dgiot/dgiot-mqtt-dashboard/src/store'
  +import dgiotBus from '@dgiot/dgiot-mqtt-dashboard/src/utils/bus'
  +import dgiotMixin from '@dgiot/dgiot-mqtt-dashboard/src/mixins/mqtt'

  Vue.use(dgiotBus)
  Vue.mixin(dgiotMixin)
  Vue.config.productionTip = false
  new Vue({
    dgiotStore,
    render: h => h(App),
  }).$mount('#app')
```

### [examples.vue](https://github.com/dgiot/dgiot-Component-example/blob/master/src/App.vue)
  ```diff
  <template>
    <div id="app">
      +<dgiot-mqtt-dashboard />
    </div>
  </template>

  <script>
  +import dgiotMqttDashboard from '@dgiot/dgiot-mqtt-dashboard/mqtt'
  export default {
    name: 'App',
    components: {
      +dgiotMqttDashboard
    },
    mounted() {
      console.log(this.Store)
    },
  }
  </script>
  ```
### Online examples

[![Edit gmullerb-react-reducer-provider](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/dgiot/dgiot-mqtt-dashboard)