Vue.js la Prise de fonctions d'assistance à l'échelle mondiale à un seul fichier de composants

Question

J'ai Vue 2 du projet qui a beaucoup de (50+) des mono-composants de fichier. J'utilise Vue-Routeur pour le routage et Vuex pour l'état.

Il y a un fichier appelé helpers.js, qui contient un tas de fonctions d'usage général, comme la mise en majuscule de la première lettre d'une chaîne. Ce fichier ressemble à ceci:

export default {
    capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
}

Mon main.js fichier d'initialisation de l'application:

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

Mon Application.vue de fichier contient le modèle:

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

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

J'ai ensuite un tas de fichier unique de composants, qui Vue-Routeur gère la navigation à l'intérieur de l' <router-view> balise dans l'Application.vue modèle.

Maintenant, disons que j'ai besoin d'utiliser l' capitalizeFirstLetter() fonction à l'intérieur d'un composant qui est défini dans SomeComponent.vue. Pour ce faire, j'ai d'abord besoin de l'importer:

<template>Some Component</template>

<script>
import {capitalizeFirstLetter} from '../helpers.js'
export default {
    data() {
        return {
            myString = "test"
        }
    },
    created() {
         var newString = this.capitalizeFirstLetter(this.myString)
    }
}
</script>

Cela devient rapidement un problème parce que j'arrive à la fin de l'importation de la fonction dans de nombreux composants différents, si pas tous d'entre eux. Cela semble répétitif et aussi rend le projet plus difficile à maintenir. Par exemple si je veux renommer helpers.js ou les fonctions à l'intérieur d'elle, je puis avoir besoin d'aller dans chaque élément que les importations et modifier l'instruction d'importation.

Longue histoire courte: comment puis-je faire les fonctions à l'intérieur de helpers.js globalement disponibles afin que je puisse les appeler à l'intérieur de tout composant sans avoir à les importer, puis ajouter le préfixe this pour le nom de la fonction? En gros, je veux être capable de faire cela:

<script>
export default {
    data() {
        return {
            myString = "test"
        }
    },
    created() {
         var newString = capitalizeFirstLetter(this.myString)
    }
}
</script>

Answer 1

l'intérieur d'un composant sans avoir à les importer, puis ajoute ce au nom de la fonction

Ce que vous avez décrit est mixin.

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

C'est un mondial mixin. avec cet ENSEMBLE de vos composants ont un capitalizeFirstLetter méthode, de sorte que vous pouvez appeler this.capitalizeFirstLetter(...)

Exemple: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010

Voir la documentation ici: https://vuejs.org/v2/guide/mixins.html

Answer 2

Sinon, vous pouvez essayer de faire vos aides de la fonction d'un plugin:

ÉDITER le 1er Mars 2018:

L'officiel de la façon de faire un plugin pour créer un objet avec une fonction installer:

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

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

Vue.use(plugin)

Vous devriez alors être en mesure de les utiliser n'importe où dans votre composants à l'aide de:

this.$helpers.capitalizeFirstLetter()

ou n'importe où dans votre application à l'aide de:

Vue.helpers.capitalizeFirstLetter()

Vous pouvez en apprendre plus à ce sujet dans la documentation: https://vuejs.org/v2/guide/plugins.html

Vieux la réponse:

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

Puis, dans votre main.js le fichier:

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

Vue.use(helpersPlugin);

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

Answer 3

Grande question. Dans mes recherches, j'ai trouvé la vue-injecter pouvez gérer cela au mieux. J'ai beaucoup de bibliothèques de fonctions (services) séparés à partir de la norme de vue de la composante logique de méthodes de manipulation. Mon choix est d'avoir les méthodes du composant juste être delegators que d'appeler les fonctions de service.

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

Answer 4

L'importer dans le main.js fichier comme "stocker" et vous pouvez y accéder à tous les composants.

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