Здраствуйте, столкнулся с проблей нарушения одного из принципов хорошего кода такого как DRY:
К примеру у меня есть layout в котором я использую обсервер:
<template>
<div>
<SidebarMobile v-if="!isDesktop" />
<Header />
<section id="content">
<Sidebar v-if="isDesktop" />
<Nuxt />
</section>
<Footer />
</div>
</template>
<script>
// Lib
import { ResizeObserver } from "@juggle/resize-observer";
// Components
import Header from "@/components/Header.vue";
import Sidebar from "@/components/Sidebar/Sidebar.vue";
import SidebarMobile from "@/components/Sidebar/SidebarMobile.vue";
import Footer from "@/components/Footer/Footer.vue";
export default {
components: {
Header,
Sidebar,
SidebarMobile,
Footer,
},
data() {
return {
width: 0,
};
},
computed: {
isDesktop() {
return this.width > 768;
},
},
mounted() {
const ro = new ResizeObserver((entries, observer) => {
for (const entri of entries) {
this.width = entri.contentRect.width;
}
});
ro.observe(document.body);
},
};
</script>
Но теперь мне нужно тоже самое провернуть в другом компоненте:
<template>
<div>
<div v-if="!isDesktop"></div>
<div v-if="isDesktop"></div>
</div>
</template>
<script>
// Lib
import { ResizeObserver } from "@juggle/resize-observer";
export default {
data() {
return {
width: 0,
};
},
computed: {
isDesktop() {
return this.width > 768;
},
},
mounted() {
const ro = new ResizeObserver((entries, observer) => {
for (const entri of entries) {
this.width = entri.contentRect.width;
}
});
ro.observe(document.body);
},
};
</script>
И вопрос как это избежать, и правильно ли я его использую?
