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

100

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>
Ege Ersoz
quelle
Sie könnten ein globales Mixin verwenden, müssten es aber verwenden this.
Bert
2
Haben Sie darüber nachgedacht, Ihre Helfer als Filter verfügbar zu machen , damit sie direkt in Ihren Vorlagen verwendet werden können, ohne sie importieren zu müssen? Das ist die Strategie, die ich verfolge und die bisher gut funktioniert.
David Weldon

Antworten:

152

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

CodinCat
quelle
Schön! Vielen Dank!
Alexey Shabramov
19
Es wäre schön, mehr Details in dieser Antwort zu haben, wie zum Beispiel, wie Sie die Mixin-Funktion in einer eigenen dedizierten Datei speichern und wie Sie sie in main.js importieren.
Alexis.Rolland
Wie kann ich capitalizeFirstLettervon einer const vm = new Vue()Instanz aus verwenden? Weil vm.capitalizeFirstLetteres nicht funktioniert.
Marcelo Rodovalho
Verweisen alle Komponenten auf die capitalizeFirstLetterFunktion 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)
Daniel F
Vielen Dank ! Es funktioniert gut in Komponenten, aber nicht in "store.js". Ich habe ein Mixin, das das "console.log" anpasst: "log: str => console.log ('% c' + str + '', 'Hintergrund: #aaa; Farbe: #fff; Polsterung: 5px; border- Radius: 5px ') ". Wie kann ich es bitte in store.js verwenden?
bArraxas
64

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

Hammerbot
quelle
Bitte listen Sie den Inhalt von helpers.vue
Marius
Können Sie ein Beispiel für den Zugriff auf den Vue Store hinzufügen? Dieser. $ store funktioniert in Komponenten, aber nicht in einem Mixin.
Marius
1
Der Inhalt von helpers.js ist in der Frage
Hammerbot
9

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.

ausgraben
quelle
0

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

user3525949
quelle
0

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

DAVID AJAYI
quelle
-5

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)
})
user2090357
quelle
11
Können Sie die Antwort vervollständigen, die zeigt, wie sie in einer Komponente verwendet wird?
JeanValjean