@Gumper

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

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

И вопрос как это избежать, и правильно ли я его использую?
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
@Gumper Автор вопроса
Я пока что использовал миксины, вроде как не самый плохой вариант.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы