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

pasar parametros entre componentes vue

Question

Tengo un proyecto Vue 2 que tiene muchos (50+) componentes de un solo archivo . Yo uso Vue-Router para enrutamiento y Vuex para el 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 se ve así:

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 etiqueta <router-view> en la plantilla App.vue.

Ahora digamos que necesito usar la función capitalizeFirstLetter() dentro de un componente que se define 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 entrar en cada componente que lo importe y modificar la declaración de importación.

En pocas palabras: ¿cómo hago 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 anteponer 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>

Answer 1

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 método capitalizeFirstLetter , por lo que puede llamar a this.capitalizeFirstLetter(...)

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

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

Answer 2

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

EDITAR el 1 de marzo de 2018:

La forma oficial de hacer un complemento es crear un objeto con una función de instalación:

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

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

Vue.use(plugin)

Entonces debería poder usarlos en cualquier parte 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

Antigua respuesta:

import helpers from ''./helpers'';
export default (Vue) => {
    Object.defineProperties(Vue.prototype, {
        $helpers: {
            get() {
                return helpers;
            }
        }
    });
};

Luego, en su archivo main.js :

import Vue from ''vue''
import helpersPlugin from ''./helpersPlugin'';

Vue.use(helpersPlugin);

Fuente : https://gist.github.com/logaretm/56126af5867e391ea9507b462259caf3

Answer 3

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

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

Answer 4

Importarlo en el archivo main.js al igual que ''store'' 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)
})