Как правильно использовать ResizeObserver?

Question

[Gumper]

Здраствуйте, столкнулся с проблей нарушения одного из принципов хорошего кода такого как 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>

И вопрос как это избежать, и правильно ли я его использую?

Comments

[Александр]

есть миксины, есть екстенд
заюзайте что-нибудь из этого

[Gumper]

Александр, спасибо что напомнили о такой прекрасной вещи как миксины

Answer 1

[Gumper]

Я пока что использовал миксины, вроде как не самый плохой вариант.