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 this
dem 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>
quelle
this
.Antworten:
Was Sie beschrieben haben, ist Mixin .
Dies ist eine globale Mischung. Mit diesem ALL verfügen Ihre Komponenten über eine
capitalizeFirstLetter
Methode, sodass Siethis.capitalizeFirstLetter(...)
von Komponentenmethoden aus aufrufen oder sie direkt wiecapitalizeFirstLetter(...)
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
quelle
capitalizeFirstLetter
von einerconst vm = new Vue()
Instanz aus verwenden? Weilvm.capitalizeFirstLetter
es nicht funktioniert.capitalizeFirstLetter
Funktion im Mixin oder haben sie eine eigene Kopie davon? Ich suche nach einem Ort zum Speichern einer Funktion, auf die jede Komponente zugreifen kann, die aber ansonsten nichts mit ihnen zu tun hat (Daten von einem Server abrufen, um sie in einem Vuex-Speicher zu speichern)Andernfalls könnten Sie versuchen, Ihre Helfer als Plugin zu verwenden:
Beim
helper.js
Exportieren Ihrer Funktionen folgendermaßen:oder
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
quelle
Erstellen Sie ein neues Mixin:
"src / mixins / generalMixin.js"
Dann importiere es in deine main.js wie:
Von nun an können Sie die Funktion wie
this.capitalizeFirstLetter(str)
in Ihrem Komponentenskript oder ohnethis
in einer Vorlage verwenden.Sie müssen verwenden,
this
weil Sie eine Methode in die Hauptinstanz von Vue gemischt haben. Wenn es Möglichkeiten zum Entfernen gibtthis
, 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.quelle
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
quelle
Erstellen Sie eine separate Datei für die Lesbarkeit (einfach meine im Plugins-Ordner abgelegt). Wiedergabe aus den Antworten von @CodinCat und @digout
Importieren Sie dann in Ihre Datei main.js oder app.js.
VERWENDUNG:
Rufen Sie an
this.sampleFunction()
oderthis.capitalizeFirstLetter()
quelle
Importieren Sie es wie 'store' in die Datei main.js und Sie können in allen Komponenten darauf zugreifen.
quelle