javascript - 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 全局可用。当我在 layouts/default.vue 的 mounted 钩子(Hook)中 console.log this.isSmallScreen 时，它为小屏幕返回 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 组件确实出现在大屏幕上，并隐藏在小屏幕上。这似乎也有效。

但是..

即使功能正常运行，我仍然会收到如下所示的警告。

属性或方法“isSmallScreen”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性在数据选项中或对于基于类的组件是 react 性的。

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

提前致谢

Answer 1

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

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

将我的 mixins 文件名更改为 mixins.js为我做了修复。