Vue.js - Создание вспомогательных функций, доступных глобально для однофайловых компонентов

У меня есть проект Vue 2, у которого есть много (50+) однофайловых компонентов. Я использую 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.

Теперь скажем, что мне нужно использовать функцию capitalizeFirstLetter() внутри компонента, который определен в SomeComponent.vue. Для этого мне сначала нужно импортировать его:

<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 или функции внутри него, тогда мне нужно перейти к каждому компоненту, который импортирует его и изменить оператор импорта.

Короче говоря:, как сделать функции внутри helpers.js доступными по всему миру, чтобы я мог вызывать их внутри любого компонента, не сначала импортируя их, а затем добавляя this к функции имя? Я в основном хочу иметь возможность сделать это:

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

Ответы

Vue.mixin({
  methods: {
    capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1)
  }
})

import helpers from './helpers';
export default (Vue) => {
    Object.defineProperties(Vue.prototype, {
        $helpers: {
            get() {
                return helpers;
            }
        }
    });
};

import Vue from 'vue'
import helpersPlugin from './helpersPlugin';

Vue.use(helpersPlugin);

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

window.capitalizeFirstLetter = (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1);
};