Vue.js - Helferfunktionen für Einzeldateikomponenten global verfügbar machen

Ich habe ein Vue 2-Projekt, das viele (50+) Einzeldateikomponenten enthält . Ich benutze Vue-Router für das Routing und Vuex für den Status.

Es gibt eine Datei namens helpers.js , die eine Reihe von allgemeinen Funktionen enthält, z. B. die Großschreibung des ersten Buchstabens einer Zeichenfolge. Diese Datei sieht folgendermaßen aus:

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

Meine Datei main.js initialisiert die App:

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

Meine App.vue- Datei enthält die Vorlage:

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

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

Ich habe dann eine Reihe von Einzeldateikomponenten, mit denen Vue-Router innerhalb des <router-view>Tags in der App.vue-Vorlage navigiert.

Angenommen , ich muss die capitalizeFirstLetter()Funktion in einer Komponente verwenden, die in SomeComponent.vue definiert ist . Dazu muss ich es zuerst importieren:

<template>Some Component</template>

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

Dies wird schnell zu einem Problem, da ich die Funktion in viele verschiedene Komponenten importiere, wenn nicht in alle. Dies scheint sich zu wiederholen und erschwert auch die Wartung des Projekts. Wenn ich beispielsweise helpers.js oder die darin enthaltenen Funktionen umbenennen möchte, muss ich in jede einzelne Komponente, die sie importiert, gehen und die import-Anweisung ändern.

Lange Rede, kurzer Sinn : Wie mache ich die Funktionen in helpers.js global verfügbar, damit ich sie in jeder Komponente aufrufen kann , ohne sie zuerst importieren und dann thisdem Funktionsnamen voranstellen zu müssen? Grundsätzlich möchte ich dazu in der Lage sein:

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

innerhalb einer Komponente, ohne sie zuerst importieren und dann dem Funktionsnamen voranstellen zu müssen

Was Sie beschrieben haben, ist Mixin .

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

Dies ist eine globale Mischung. Mit diesem ALL verfügen Ihre Komponenten über eine capitalizeFirstLetterMethode, sodass Sie this.capitalizeFirstLetter(...)von Komponentenmethoden aus aufrufen oder sie direkt wie capitalizeFirstLetter(...)in der Komponentenvorlage aufrufen können .

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

Die Dokumentation finden Sie hier: https://vuejs.org/v2/guide/mixins.html

Andernfalls könnten Sie versuchen, Ihre Helfer als Plugin zu verwenden:

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

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

Vue.use(plugin)

Beim helper.jsExportieren Ihrer Funktionen folgendermaßen:

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

oder

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

Sie sollten sie dann überall in Ihren Komponenten verwenden können, indem Sie:

this.$helpers.capitalizeFirstLetter()

oder irgendwo in Ihrer Anwendung mit:

Vue.helpers.capitalizeFirstLetter()

Weitere Informationen hierzu finden Sie in der Dokumentation: https://vuejs.org/v2/guide/plugins.html

Erstellen Sie ein neues Mixin:

"src / mixins / generalMixin.js"

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

Dann importiere es in deine main.js wie:

import '@/mixins/generalMixin'

Von nun an können Sie die Funktion wie this.capitalizeFirstLetter(str)in Ihrem Komponentenskript oder ohne thisin einer Vorlage verwenden.

Sie müssen verwenden, thisweil Sie eine Methode in die Hauptinstanz von Vue gemischt haben. Wenn es Möglichkeiten zum Entfernen gibt this, die wahrscheinlich etwas Unkonventionelles beinhalten, ist dies zumindest eine dokumentierte Methode zum Teilen von Funktionen, die für zukünftige Vue-Entwickler Ihres Projekts leicht verständlich ist.

Gute Frage. Bei meinen Nachforschungen habe ich festgestellt, dass Vue-Inject am besten damit umgehen kann. Ich habe viele Funktionsbibliotheken (Dienste) getrennt von Standardmethoden für die Verarbeitung von Vue-Komponentenlogik. Ich habe die Wahl, dass Komponentenmethoden nur Delegatoren sind, die die Servicefunktionen aufrufen.

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

Verwenden von Webpack v4

Erstellen Sie eine separate Datei für die Lesbarkeit (einfach meine im Plugins-Ordner abgelegt). Wiedergabe aus den Antworten von @CodinCat und @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')
      }
    }
  })

Importieren Sie dann in Ihre Datei main.js oder app.js.

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

VERWENDUNG:

Rufen Sie an this.sampleFunction()oderthis.capitalizeFirstLetter()

Importieren Sie es wie 'store' in die Datei main.js und Sie können in allen Komponenten darauf zugreifen.

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