Nuxt 프로젝트에서 커스텀 Vue 믹스인과 도우미 기능을 어디에 배치할 수 있습니까?

Nuxt 프로젝트에서 커스텀 Vue 믹스인과 도우미 기능을 어디에 배치할 수 있습니까?

Nuxt 프로젝트가 있는데 Vue 컴포넌트와 페이지에서 재사용할 커스텀 기능과 Vue 믹스인을 만들어야 합니다.

이것들을 포함한 파일을 어느 폴더에 넣어야 합니까?Nuxt 프로젝트의 최상위 레벨에 'lib' 폴더를 생성하여 파일을 넣어야 합니까?

도움이 되는 경우 추가 세부 정보:

• 이러한 함수는 필요한 경우에만 Import됩니다(글로벌하지 않음).
• 이러한 기능은 테스트됩니다.

Nuxt 디렉토리 구조 문서

내 nuxt 프로젝트에서, 나는 보통 프로젝트의 루트 디렉토리 레벨에 4개의 폴더를 추가합니다.mixins내 모든 믹스인에 대해models제가 앱에서 사용하는 모델이나 수업의 경우servicesAPI의 모든 엔드포인트와utils여기에는 모든 유틸리티 기능 및 기타 일반적인 기능(입력 검증 기능 등)이 포함되어 있으며 내 디렉토리는 다음과 같습니다.

의 경우mixins그런 다음 필요한 믹스인을 원하는 컴포넌트로 Import하여 통상 사용하는 것처럼 사용할 수 있습니다.

import someMixin from '@/mixins/someMixin'
...
export default {
  mixins: [someMixin],
  ...
}

mixins 파일을 2개의 폴더에 넣을 수 있습니다.

1. plugins 폴더에 global-module을 생성하고 그 후 이 파일을plugins: []nuxt.config로 분할합니다.링크
2. mixins 폴더를 만들고 여기에 mixin.mixin을 만들 수 있습니다.링크

그러나 nuxt.js의 문서에는 첫 번째 솔루션이 정확하다고 나와 있습니다.

Nuxt에는 믹스인을 위한 특정 디렉토리가 없기 때문에 프로젝트에 있는 다른 플러그인처럼 만들 수 있습니다.과도하게 사용하는 플러그인은 다음 폴더에 있는 것을 선호합니다.common정말 당신의 선택입니다.그러나 프로젝트 전체에서 재사용할 경우 글로벌 믹스인을 사용하는 것이 좋습니다.이 믹스인은 유사하지만 올바르게 처리하지 않으면 메모리 누수가 발생할 수 있습니다.그래서 여러 번 등록되지 않도록 플래그가 필요합니다.

따라서, 마음에 드는 디렉토리를 작성합니다(예:myMixinFolder예를 들어 mixin 파일을 만듭니다.안에 파일을 만듭니다.myMixinFolder말만 해my-mixin-plugin.js.

import Vue from "vue"

if (!Vue.__my_mixin__) {
  Vue.__my_mixin__ = true
  Vue.mixin({ 
    methods: {
      sayIt(name) {
        console.log(`Hello dear ${name}`)
      }
    }
  })
}

그 후 에 추가합니다.nuxt.config.js파일:

plugins: [
    { src: '~/plugins/my-mixin-plugin.js' },
],

이제 다음과 같은 모든 컴포넌트에서 사용할 수 있습니다.

<template>
  <span>{{ sayIt('Batman') }}</span>
</template>

또는 내부script:

this.sayIt('Batman')

이렇게 하면 여러 번 믹스인을 가져올 필요가 없습니다(단, 메모리 누수를 방지하기 위해 여러 믹스인 파일이 있는 경우에는 주의해야 합니다).

언급URL : https://stackoverflow.com/questions/69224413/where-to-put-custom-vue-mixins-and-helper-functions-in-a-nuxt-project