[vue.js] Vue.js-단일 파일 구성 요소에서 전역 적으로 사용 가능한 도우미 기능 만들기

많은 (50 개 이상의) 단일 파일 구성 요소 가있는 Vue 2 프로젝트가 있습니다 . 라우팅에는 Vue-Router를 사용하고 상태에는 Vuex를 사용합니다.

문자열의 첫 글자를 대문자로 바꾸는 것과 같은 많은 범용 함수를 포함하는 helpers.js 라는 파일 이 있습니다. 이 파일은 다음과 같습니다.

export default {
    capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
}

내 main.js 파일은 앱을 초기화합니다.

import Vue from 'vue'
import VueResource from "vue-resource"
import store from "./store"
import Router from "./router"
import App from "./components/App.vue"

Vue.use(VueResource)

const app = new Vue({
    router: Router,
    store,
    template: '<app></app>',
    components: { App }
}).$mount('#app')

내 App.vue 파일에는 다음 템플릿이 포함되어 있습니다.

<template>
    <navbar></navbar>
    <div class="container">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //stuff
        }
    }
}
</script>

그런 다음 Vue-Router가 <router-view>App.vue 템플릿 의 태그 내부로 이동하는 작업을 처리하는 단일 파일 구성 요소 가 많이 있습니다.

이제 SomeComponent.vue에capitalizeFirstLetter() 정의 된 구성 요소 내 에서 함수 를 사용해야한다고 가정 해 보겠습니다 . 이렇게하려면 먼저 가져와야합니다.

<template>Some Component</template>

<script>
import {capitalizeFirstLetter} from '../helpers.js'
export default {
    data() {
        return {
            myString = "test"
        }
    },
    created() {
         var newString = this.capitalizeFirstLetter(this.myString)
    }
}
</script>

모두는 아니지만 많은 다른 구성 요소로 함수를 가져 오기 때문에 이것은 빠르게 문제가됩니다. 이것은 반복적으로 보이며 또한 프로젝트를 유지하기 어렵게 만듭니다. 예를 들어 helpers.js 또는 그 안에있는 함수의 이름을 바꾸려면이를 가져 오는 모든 단일 구성 요소로 이동하여 import 문을 수정해야합니다.

간단히 말해서 , helpers.js 내부의 함수를 전역 적으로 사용 가능 하게 만들려면 먼저 함수 를 가져온 다음 함수 이름 앞에 추가하지 않고도 모든 구성 요소 내에서 호출 할 수 있도록 하려면 어떻게해야 this합니까? 나는 기본적으로 이것을 할 수 있기를 원합니다.

<script>
export default {
    data() {
        return {
            myString = "test"
        }
    },
    created() {
         var newString = capitalizeFirstLetter(this.myString)
    }
}
</script>