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

Question

我正在创建一个 Nuxt 应用程序，其中一个特定的菜单应该在移动设备上隐藏。所以我创建了一个 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)
  }
})

我已经在 nuxt.config.js

中注册了 mixins 插件

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

现在我希望 isSmallScreen 可以在全球范围内使用。当我console.log this.isSmallScreen 在layouts/default.vue 的mounted hook 中时，它returns 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.

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

提前致谢

Answer 1

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

在documentation中有一段关于Name conventional plugin的部分，这意味着file.client.js只会在客户端运行，并且file.server.js 仅限SSR。这就是为什么我的 mixin 插件中的数据不可用导致警告的原因。

将我的 mixins 文件名更改为 mixins.js 为我解决了问题。

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

Nuxt mixin - Property or method is not defined on the instance but referenced during render

javascript

mixins

vue.js

nuxt.js

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

Nuxt mixin - Property or method is not defined on the instance but referenced during render

javascript

mixins

vue.js

nuxt.js

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