У меня есть проект 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>