Подскажите методы решения задачи. Нужно отображать данные карточек в реальном времени (тобишь на сервере имеется БД с таблицами свойств устройств). БД постоянно обновляется в реальном времени, тобишь сами параметры свойств устройств. И у меня возникает несколько вопросов:
1. Как мне сделать обновление этих данных на сайте в RealTime, относительно обновления информации в БД?
2. Стоит ли использовать VuexStore и туда заганять данные чтобы потом можно было отображать на любой странице?
(как это правильно организовать)
3. Как сделать определенную карточку под отдельное устройство, тобишь сейчас я вывожу все карточки, как правильно сделать чтобы по нажатию на кнопку в определенной карточке, открывалась отдельная карточка с данными только по этому устройству?
На данный момент делаю вывод с помощью axios, вот так:
asyncData() {
return axios
.get("https://db-http.firebaseio.com/devices.json")
.then(response => {
return {
currencies: response.data
};
});
},
Вывод в блоки:
<div id="cards" v-for="currency in currencies" :key="currency.named">
<card :id="currency.id" :named="currency.named" :location="currency.location" :napruga="currency.napruga"></card></div>
<template>
<div class="md-layout-item" >
<div class="card-expansion md-layout-item">
<md-card md-with-hover>
<md-card-media>
<md-card-header class="md-card-header-fix">
<div class="md-title" style="font-size: 18px; text-align: center;" v-bind:title="nazvahint">{{named}}</div>
<div class="md-subhead" style="font-size: 14px; text-align: center;" v-bind:title="locationhint"><md-icon>location_on</md-icon>{{location}}-{{napruga}}</div>
</md-card-header>
<table border="1" class="tablefont" >
<tr class="trheight">
<th class="left-down" v-bind:title="Ppotuzhnist" valign="bottom">P=100</th>
<th class="middle-top" v-bind:title="Qpotuzhnist" valign="top">Q=200</th>
<th class="right-down" v-bind:title="Spotuzhnist" valign="bottom">S=300</th>
</tr>
</table>
<md-button v-bind:title="statered" style="background-color:red" class="md-fab md-primary md-mini" ></md-button>
</md-card-media>
<md-card-expand>
<md-card-actions md-alignment="space-between">
<div>
<md-button class="buttoncard md-primary">все</md-button>
</div>
<md-card-expand-trigger>
<md-button class="buttoncard md-primary" ><md-icon>keyboard_arrow_down</md-icon>Параметри</md-button>
</md-card-expand-trigger>
</md-card-actions>
<md-card-expand-content>
<md-card-content :class="color">
<param-devices></param-devices>
{{napruga}}
</md-card-content>
</md-card-expand-content>
</md-card-expand>
</md-card>
</div>
</div>
</template>
<script>
import ParamDevices from "~/components/ParamDevices.vue";
export default {
props: ["id", "named", "location", "napruga"],
components: {
ParamDevices,
},
computed: {
color() {
return this.napruga > 0 ? "inc" : "dec";
}
}
};
</script>
<style scoped>
.inc {
color: green;
}
.dec {
color: red;
}
