vue/nuxt에서 파일 js를 가져올 위치

vue/nuxt에서 파일 js를 가져올 위치

보통 js 코드를 함수와 함께 사용하여 일부 이벤트에서 실행합니다.

현재 nuxt.js를 사용하고 있는데, 이 파일을 어디에 둘지, 또는 모든 컴포넌트에서 이러한 기능을 사용하기 위한 글로벌 메서드를 어떻게 작성할지 궁금합니다.모든 특정 컴포넌트에 필요한 메서드를 작성할 수 있지만, 그 이후에는 외부에서 사용할 수 없습니다.

vue/nuxt에서는 어떻게 합니까?

vue.js에서는 mixin을 사용하는 방법이 있습니다.nuxt에서는 mixin을 사용하여 mixin을 사용할 수도 있습니다.그 후 플러그인으로 등록해야 합니다만, 우선 다음과 같습니다.

비글로벌 믹스인

믹스인을 위한 추가 폴더를 만듭니다.예를 들어 /mixins/myMixin입니다.js

export default {
  methods: {
    commonMethod() {
      console.log('Hello')
    }
  }
}

그런 다음 레이아웃, 페이지 또는 구성 요소를 가져오고 mixins 개체를 통해 추가합니다.

<script>
  import myMixin from '~/mixins/myMixin.js'   

  export default {
    mixins: [myMixin] 
  }
</script>

글로벌 믹스인

예를 들어 새 파일 plugins/mixinCommon.js의 경우:

import Vue from 'vue'

Vue.mixin({
  methods: {
    commonMethod() {}
  }
})

파일 포함nuxt.config.js다음과 같이 합니다.plugins: ['~/plugins/mixinCommon']

그 후 사용 가능한 모든 곳에서 메서드를 사용할 수 있으며, 이 메서드를 common.Method()로 호출할 수 있습니다.vue.js 문서로부터의 조언은 다음과 같습니다.

글로벌 믹스인은 서드파티 컴포넌트를 포함하여 생성된 모든 Vue 인스턴스에 영향을 미치기 때문에 신중하게 사용해야 합니다.대부분의 경우 위의 예시와 같이 커스텀옵션 처리에만 사용해야 합니다.중복 적용을 피하기 위해 플러그인으로 출하하는 것도 좋습니다.

언급URL : https://stackoverflow.com/questions/57654077/where-to-import-file-js-in-vue-nuxt