在 nuxt.js 中创建我自己的全局变量（使用 vuetify）答案

【问题标题】：create my own global variable in nuxt.js (with vuetify)在 nuxt.js 中创建我自己的全局变量（使用 vuetify）
【发布时间】：2021-09-09 08:22:21
【问题描述】：

我正在使用 nuxt 开发一个应用程序，我厌倦了每次都必须使用 this.$Vuetify.breakpoint.name == 'xs' 在页面中编写一个 if 语句以获得响应。所以我想创建自己的变量并调用这个长变量。这是我的代码↓

(mynuxtapp/plugins/createCustomVar.js)

  import Vue from "vue";

  Vue.prototype.$bp = Vue.prototype.$vuetify.breakpoint.name;
  console.log(Vue.prototype.$bp);

我已经设置了 nuxtconfig 来运行插件。但它返回一个错误： TypeError：无法读取未定义的属性“断点”。显然我无法使用“$”访问 vuetify，即使我可以在页面中访问。

我该怎么办？有没有更简单的方法或最佳实践？感谢您阅读最后的问题！

【问题讨论】：

标签： javascript vue.js nuxt.js vuetify.js

【解决方案1】：

如何开始，您只需注销上下文对象并查看您拥有的内容。我想您可能会发现 Vuetify 对象位于其他地方。

export default (context, inject) => {
  console.log('context:', context)
}

插件设置文档见here

【讨论】：

【解决方案2】：

$vuetify 属性存在于 Nuxt 上下文中，而不是 Vue 原型中。

plugins/ 下的每个模块都应返回一个接收 Nuxt 上下文作为第一个参数的函数。该上下文包含由@nuxtjs/vuetify 插件设置的$vuetify 对象。

Plugin API 的第二个参数是inject，它允许你inject globals into the Nuxt context。

所以你的插件应该看起来像这样：

// ~/plugins/myGlobals.js
export default ({ $vuetify }, inject) => {
  // inject makes `$bp` available in context (the `$` prefix is automatically prefixed)
  inject('bp', $vuetify.breakpoint.name)
}

demo

【讨论】：