如何从另一个函数访问全局函数（Vue.prototype.myFn）？答案

【问题标题】：How to access a global function (Vue.prototype.myFn) from another function?如何从另一个函数访问全局函数（Vue.prototype.myFn）？
【发布时间】：2019-01-06 14:33:11
【问题描述】：

我在一个 nuxt.js 项目中并试图创建全局函数，我是这个错误：

Cannot read property '$toggleBodyClass' of undefined

这是我的代码（plugins/globals.js）：

import Vue from 'vue';

Vue.prototype.$toggleBodyClass = (addRemoveClass, className) => {
  const elBody = document.body;

  if (addRemoveClass === 'addClass') {
    elBody.classList.add(className);
  } else {
    elBody.classList.remove(className);
  }
};

Vue.prototype.$setModalBackdrop = () => {
  this.$toggleBodyClass('addClass', 'modal-open'); // ** How to make this work? **
};

当我在我的组件 (components/myComp.vue) 中使用它时，它工作得很好：

<template>
  <div>
    <button @click="handelClick">Toggle Class</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$toggleBodyClass('addClass', 'modal-open');
    },
  },
};
</script>

请帮忙，谢谢。

【问题讨论】：

你试过Vue.prototype.$toggleBodyClass而不是this.$toggleBodyClass吗？
@SamiHult 哇！这很简单:) 谢谢。您可以将此添加为答案吗？我将其标记为已接受。

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

在 nuxt 中，您可以使用注入功能使其从上下文、vuex 存储等也可以访问 inject

export default ({ app }, inject) => {
  inject('myInjectedFunction', (string) => console.log('That was easy!', string))
}

【讨论】：

【解决方案2】：

只需更改您的代码

this.$toggleBodyClass

到

Vue.prototype.$toggleBodyClass

【讨论】：