У меня есть проект 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>
this. - person Bert schedule 05.03.2017