Nuxt mixin-属性或方法未在实例上定义，但在渲染期间被引用

Question

我正在创建Nuxt应用程序，其中应在移动设备上隐藏特定菜单。因此，我创建了一个具有isSmallScreen属性的mixin插件，该属性可以为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)
  }
})

我已经在nuxt.config.js中注册了mixins插件>

plugins: [
  '~/plugins/base/global/mixins.client.js',
]
现在我希望isSmallScreen在全球范围内可用。当我在this.isSmallScreen中已安装的挂钩中console.log layouts/default.vue时，对于小屏幕它将返回true，对于大屏幕将返回false。似乎工作正常。

问题

我的default.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.

我一直在寻找解决方案，但找不到解决方案。有人在这里看到我在做什么错吗？

提前感谢

我正在创建Nuxt应用程序，其中应在移动设备上隐藏特定菜单。所以我创建了一个具有属性isSmallScreen的mixin插件，它可以为false或true。 mixins.client.js ...

Answer 1

我发现了问题。 <nuxt/>组件内部也引用了isSmallScreen。在页面重新加载时，该属性虽然不存在于数据中。那是因为我将我的mixins文件命名为mixins.client.js