在nuxt.js中创建我自己的全局变量(使用vuetify)
在nuxt.js中创建我自己的全局变量(使用vuetify)
提问于 2021-06-26 13:17:55
我正在开发一个使用nuxt的应用程序，我厌倦了每次都要使用this.$Vuetify.breakpoint.name ==‘X’在页面中编写if语句来提高响应性。所以我想创建我自己的变量，并将其命名为long variable.here is my code↓
(mynuxtapp/plugins/createCustomVar.js)
import Vue from "vue";
Vue.prototype.$bp = Vue.prototype.$vuetify.breakpoint.name;
console.log(Vue.prototype.$bp);我已经设置nuxtconfig来运行插件。但它返回一个错误: TypeError: Cannot read property‘’breakpoint‘of undefined。显然，我不能使用"$“访问vuetify，即使我可以在页面中访问它。
我该怎么办？有没有更简单的方法或最佳实践？感谢您阅读最后的问题！
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-06-26 13:57:44
$vuetify属性存在于Nuxt上下文中，而不是Vue原型中。
plugins/下的每个模块都应该返回一个函数，该函数接收Nuxt上下文作为第一个参数。该上下文包含由@nuxtjs/vuetify插件设置的$vuetify对象。
插件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)
}Stack Overflow用户
发布于 2021-06-26 13:55:48
首先，您只需注销context对象并查看您拥有的内容，如何？我想您可能会发现Vuetify对象位于其他地方。
export default (context, inject) => {
console.log('context:', context)
}有关设置插件的文档，请参阅here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68139477
复制相关文章
相似问题
腾讯云开发者
