Eu tenho um projeto Vue 2 que tem muitos (50+) componentes de arquivo único . Eu uso o Vue-Router para roteamento e Vuex para o estado.
Existe um arquivo, chamado helpers.js , que contém várias funções de uso geral , como colocar a primeira letra de uma string em maiúscula. Este arquivo tem a seguinte aparência:
export default {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
}
Meu arquivo main.js inicializa o aplicativo:
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')
Meu arquivo App.vue contém o modelo:
<template>
<navbar></navbar>
<div class="container">
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
//stuff
}
}
}
</script>
Então, tenho um monte de componentes de arquivo único, que o Vue-Router lida com a navegação dentro da <router-view>
tag no modelo App.vue.
Agora, digamos que eu precise usar a capitalizeFirstLetter()
função dentro de um componente definido em SomeComponent.vue . Para fazer isso, primeiro preciso importá-lo:
<template>Some Component</template>
<script>
import {capitalizeFirstLetter} from '../helpers.js'
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = this.capitalizeFirstLetter(this.myString)
}
}
</script>
Isso se torna um problema rapidamente porque acabo importando a função em muitos componentes diferentes, senão em todos eles. Isso parece repetitivo e também torna o projeto mais difícil de manter. Por exemplo, se eu quiser renomear helpers.js, ou as funções dentro dele, eu preciso ir para cada componente que o importa e modificar a instrução import.
Resumindo: como faço para tornar as funções dentro de helpers.js globalmente disponíveis para que eu possa chamá-las dentro de qualquer componente sem ter que primeiro importá-las e depois acrescentar this
o nome da função? Eu basicamente quero ser capaz de fazer isso:
<script>
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = capitalizeFirstLetter(this.myString)
}
}
</script>
this
.