다른 함수에서 글로벌 함수(Vue.protype.myFn)에 액세스하는 방법

다른 함수에서 글로벌 함수(Vue.protype.myFn)에 액세스하는 방법

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? **
};

컴포넌트(컴포넌트/myComp.vue)에서 사용하면 정상적으로 동작합니다.

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

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

제발 도와주세요, 고마워요.

코드를 변경하기만 하면 됩니다.

this.$toggleBodyClass

로.

Vue.prototype.$toggleBodyClass

nuxt에서는 inject 기능을 사용하여 컨텍스트에서 액세스할 수 있으며 vuex 스토어 등에서도 inject 할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/54062533/how-to-access-a-global-function-vue-prototype-myfn-from-another-function