Nuxt mixin - свойство или метод не определены в экземпляре, но на них ссылаются во время рендеринга

Question

Я создаю приложение Nuxt, где конкретное меню c должно быть скрыто на мобильном телефоне. Итак, я создал плагин mixin со свойством isSmallScreen, которое может иметь значение false или true.

mixins.client. js

import Vue from 'vue'
import styles from '@/assets/styles/base/globals/_responsive.scss'

const debug = true

let breakpoint = parseInt(styles.breakpoint, 10)

Vue.mixin({
  data: function() {
    return {
      isSmallScreen: null
    }
 },
 created() {
    this.isSmallScreen = (window.innerWidth <= breakpoint)
  }
})

Я зарегистрировал плагин mixins в nuxt.config.js

plugins: [
  '~/plugins/base/global/mixins.client.js',
]

Теперь я ожидаю, что isSmallScreen будет доступен во всем мире. Когда я console.log this.isSmallScreen в смонтированном хуке в layouts/default.vue, он возвращает true для маленьких экранов и false для больших экранов. Это, кажется, работает нормально.

Проблема

Мои настройки по умолчанию. vue Шаблон макета выглядит как

<template>
<div>

  <client-only>
    <div class="nav-container">
      <f-nav-admin />
      <f-nav-top v-if="!isSmallScreen"/>
    </div>
  </client-only>

  <!-- page content -->
  <div class="page-content-container">
    <nuxt />
  </div>

</div>
</template>

Я ожидаю f-nav-top компонент действительно появляется на больших экранах и прячется на маленьких экранах. Который также, кажется, работает.

Но ..

Даже если функциональность делает то, что должен, я все равно получаю предупреждение, как показано ниже.

Property or method "isSmallScreen" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Я уже некоторое время ищу решение, но не могу найти решение. Кто-нибудь видит, что я здесь не так делаю?

Заранее спасибо

Answer 1

Я нашел проблему. Внутри компонента <nuxt/> также была ссылка на isSmallScreen. При перезагрузке страницы свойство не существует в данных, хотя. Это потому, что я назвал свой файл mixins mixins.client.js

В документации есть часть о Имя обычного плагина , что означает, что file.client.js будет работать только на клиент, и file.server.js только SSR. Вот почему данные из моего плагина mixin не были доступны, что привело к предупреждению.

Изменение имени файла моего mixin на mixins.js помогло мне.