Vue.js la Prise de fonctions d'assistance à l'échelle mondiale à un seul fichier de composants

J'ai Vue 2 du projet qui a beaucoup de (50+) fichier unique des composants. J'utilise Vue-Routeur pour le routage et Vuex pour l'état.

Il y a un fichier appelé helpers.js, qui contient un tas de fonctions d'usage général, comme la mise en majuscule de la première lettre d'une chaîne. Ce fichier ressemble à ceci:

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

Mon main.js fichier d'initialisation de l'application:

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')

Mon App.vue fichier contient le modèle:

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

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

Je puis avoir un tas de fichier unique de composants, qui Vue-Routeur gère la navigation à l'intérieur de la <router-view> balise dans l'Application.vue modèle.

Maintenant, disons que j'ai besoin d'utiliser la capitalizeFirstLetter() fonction à l'intérieur d'un composant qui est défini dans SomeComponent.vue. Pour ce faire, j'ai d'abord besoin de l'importer:

<template>Some Component</template>

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

Cela devient rapidement un problème parce que j'arrive à la fin de l'importation de la fonction dans de nombreux composants différents, si pas tous d'entre eux. Cela semble répétitif et aussi rend le projet plus difficile à maintenir. Par exemple si je veux renommer helpers.js ou les fonctions à l'intérieur d'elle, je puis avoir besoin d'aller dans chaque élément que les importations et de le modifier à l'instruction import.

Longue histoire courte: comment puis-je faire les fonctions à l'intérieur de helpers.js à l'échelle mondiale disponibles afin que je puisse les appeler à l'intérieur de tout composant sans avoir à les importer, puis ajouter this le nom de la fonction? En gros, je veux être capable de faire cela:

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