Tengo un proyecto de Vue 2 que tiene muchos (50+) componentes de un solo archivo . Utilizo Vue-Router para enrutamiento y Vuex para estado.
Hay un archivo, llamado helpers.js , que contiene un montón de funciones de propósito general , como poner en mayúscula la primera letra de una cadena. Este archivo tiene este aspecto:
export default {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
}
Mi archivo main.js inicializa la aplicación:
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')
Mi archivo App.vue contiene la plantilla:
<template>
<navbar></navbar>
<div class="container">
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
//stuff
}
}
}
</script>
Luego tengo un montón de componentes de un solo archivo, que Vue-Router maneja navegando dentro de la <router-view>
etiqueta en la plantilla App.vue.
Ahora digamos que necesito usar la capitalizeFirstLetter()
función dentro de un componente que está definido en SomeComponent.vue . Para hacer esto, primero necesito importarlo:
<template>Some Component</template>
<script>
import {capitalizeFirstLetter} from '../helpers.js'
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = this.capitalizeFirstLetter(this.myString)
}
}
</script>
Esto se convierte en un problema rápidamente porque termino importando la función en muchos componentes diferentes, si no en todos. Esto parece repetitivo y también hace que el proyecto sea más difícil de mantener. Por ejemplo, si quiero cambiar el nombre de helpers.js, o las funciones dentro de él, entonces necesito ir a cada componente que lo importa y modificar la declaración de importación.
En pocas palabras: ¿cómo puedo hacer que las funciones dentro de helpers.js estén disponibles globalmente para poder llamarlas dentro de cualquier componente sin tener que importarlas primero y luego anteponerlas this
al nombre de la función? Básicamente quiero poder hacer esto:
<script>
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = capitalizeFirstLetter(this.myString)
}
}
</script>
this
.