Vue.js: hacer que las funciones auxiliares estén disponibles globalmente para componentes de un solo archivo

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 thisal 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>

dentro de cualquier componente sin tener que importarlos primero y luego anteponer esto al nombre de la función

Lo que describiste es mixin .

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

Este es un mixin global. con esto TODOS sus componentes tendrán un capitalizeFirstLettermétodo, por lo que puede llamar this.capitalizeFirstLetter(...)desde métodos de componentes o puede llamarlo directamente como capitalizeFirstLetter(...)en la plantilla de componentes.

Ejemplo de trabajo: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010

Consulte la documentación aquí: https://vuejs.org/v2/guide/mixins.html

De lo contrario, podría intentar hacer que sus ayudantes funcionen como un complemento:

import Vue from 'vue'
import helpers from './helpers'

const plugin = {
  install () {
    Vue.helpers = helpers
    Vue.prototype.$helpers = helpers
  }
}

Vue.use(plugin)

En su helper.jsexportación sus funciones, de esta manera:

const capFirstLetter = (val) => val.charAt(0).toUpperCase() + val.slice(1);
const img2xUrl = (val) => `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;

export default { capFirstLetter, img2xUrl };

o

export default { 
  capFirstLetter(val) {
    return val.charAt(0).toUpperCase() + val.slice(1);
  },
  img2xUrl(val) {
    return `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;
  },
};

Entonces debería poder usarlos en cualquier lugar de sus componentes usando:

this.$helpers.capitalizeFirstLetter()

o en cualquier lugar de su aplicación usando:

Vue.helpers.capitalizeFirstLetter()

Puede obtener más información sobre esto en la documentación: https://vuejs.org/v2/guide/plugins.html

Crea un nuevo mixin:

"src / mixins / generalMixin.js"

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

Luego impórtelo en su main.js como:

import '@/mixins/generalMixin'

A partir de ahora, podrá utilizar la función como this.capitalizeFirstLetter(str)dentro de su script de componente o sin ella thisen una plantilla.

Debe usarlo thisporque mezcló un método en la instancia principal de Vue. Si hay formas de eliminarlo this, probablemente implique algo poco convencional, al menos esta es una forma documentada de compartir funciones que será fácil de entender para cualquier futuro desarrollador de Vue de su proyecto.

Usando Webpack v4

Cree un archivo separado para facilitar la lectura (simplemente colocó el mío en la carpeta de complementos). Reproducido de las respuestas de @CodinCat y @digout

//resources/js/plugins/mixin.js
import Vue from 'vue'

Vue.mixin({
    methods: {
      capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1),
      sampleFunction(){
        alert('Global Functions')
      }
    }
  })

Luego importe en su archivo main.js o app.js

//app.js
import mixin from './plugins/mixin' 

USO:

Llamar this.sampleFunction()othis.capitalizeFirstLetter()

Utilice un filtro global si solo se refiere a cómo se formatean los datos cuando se procesan. Este es el primer ejemplo en los documentos :

{{ message | capitalize }}

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Gran pregunta. En mi investigación, descubrí que vue-inject puede manejar esto de la mejor manera. Tengo muchas bibliotecas de funciones (servicios) que se mantienen separadas de los métodos estándar de manejo de lógica de componentes vue. Mi elección es que los métodos de componentes sean simplemente delegadores que llamen a las funciones de servicio.

https://github.com/jackmellis/vue-inject

Impórtelo en el archivo main.js como 'tienda' y puede acceder a él en todos los componentes.

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)
})