Vue.js-Haciendo que las funciones auxiliares estén disponibles globalmente para los componentes de un solo archivo


Tengo un proyecto Vue 2 que tiene muchos (50+) componentes de un solo archivo. Yo uso Vue-Router para el 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 principal.js file 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 Aplicación.el archivo vue contiene la plantilla:

<template>
    <navbar></navbar>
    <div class="container">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //stuff
        }
    }
}
</script>

Entonces tengo un montón de componentes de un solo archivo, que Vue-Router maneja la navegación dentro de la etiqueta <router-view> en la Aplicación.plantilla vue.

Ahora digamos que necesito usar la función capitalizeFirstLetter() 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 todos ellos. Esto parece repetitivo y también hace que el proyecto sea más difícil mantener. Por ejemplo, si quiero cambiar el nombre de los ayudantes.js, o las funciones dentro de él, entonces necesito entrar en cada componente que lo importa y modificar la instrucción de importación.

En resumen: cómo hago que las funciones sean ayudantes internos.js globalmente disponible para que pueda llamarlos dentro de cualquier componente sin tener que importarlos primero y luego anteponer this al nombre de la función? Básicamente quiero ser capaz de hacer esto:

<script>
export default {
    data() {
        return {
            myString = "test"
        }
    },
    created() {
         var newString = capitalizeFirstLetter(this.myString)
    }
}
</script>
Author: matiaslauriti, 2017-03-05

4 answers

Dentro de cualquier componente sin tener que importarlos primero y luego anteponerlos 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

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

 49
Author: CodinCat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-06 06:07:24

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

Editar 1 de marzo 2018:

La forma oficial de hacer un plugin 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ías poder usarlos en cualquier parte de tus 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

Respuesta antigua:

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

Entonces, en su archivo main.js:

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

Vue.use(helpersPlugin);

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

 17
Author: Hammerbot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-01 08:24:09

Impórtalo en el main.archivo js al igual que 'store' y se 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)
})
 1
Author: user2090357,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-11 10:56:46

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 de componente sean solo delegadores que llamen a las funciones de servicio.

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

 0
Author: user3525949,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-06 06:44:51