Wie alle statischen Zeichenketten an einem Ort haben

Question

Ich erstelle eine Vue Webapp, ich habe wenige Seiten mit dynamischem Inhalt und auch einige Seiten, die meistens statischen Inhalt haben. Ich möchte alle diese statischen Zeichenfolgen an einen Ort verschieben.

Eine Option kann vue-i18n oder vue-multilanguage zu benutzen, gibt diese Unterstützung Content-Dateien zu haben, wie this, aber ich habe wirklich keine Verwendung Fall der Unterstützung mehrerer Sprachen, so scheint es, auch ein wenig über töten zu mir.

Eine andere Option kann sein, einen Vuex-Speicher für alle Strings zu haben, vuex, den ich bereits für die Statusverwaltung verwende.

Was kann ein guter Ansatz sein, dies zu tun.

Answer 1

Ich bin nicht bewusst ein Standard Weg dies zu tun, auch dies wäre für alle Web-Frameworks. Das ist ein interessantes und gültiges Problem.

Wenn ich etwas dagegen zu tun:

1. ich diese Strings überall verfügbar sein möchte.
2. Ich würde es vorziehen, diese Zeichenfolgen nicht in allen Komponenten zu importieren und jedes Mal, wenn ich sie verwenden musste.
3. Ich möchte, dass der Speicherplatz beschreibend ist, so dass ich nicht hin und her gehen muss, um zu überprüfen, was ich importieren möchte. [Der schwierigste Teil meiner Meinung nach] 1

Um das zu erreichen, wir verwenden können:

1. Vuex
2. A services/some.js-Datei, die ein object exportiert.
3. Plugins

Ich würde mit plugins weil:

ich die Saiten durch lediglich mit this in einer Komponente bekommen, verhindert Vue.use(plugin) das gleiche Plugin zweimal Gewöhnung, und zur gleichen Zeit erreicht all die Punkte (3. wird immer noch eine harte Nuss zu knacken sein). Nur der Nachteil, dass ich davon weiß, könnte die Vue-Instanz überladen.

So können Plugin wie gestaltet sein:

dieser

// stringsHelperPlugin.js 
const STRING_CONST = { 
    [component_1_Name]: { 
    key1: val1, 
    key2: val2, 
    .... 
    }, 
    [component_2_Name]: { 
    key1: val1, 
    key2: val2, 
    .... 
    }, 
    ... 
} 

StringConst.install = function (Vue, options) { 
    Vue.prototype.$getStringFor = (componentName, key) => { 
    return STRING_CONST['componentName'][key] 
    } 
} 

export default StringConst 

in main.js verwendet wie werden können:

import StringConst from 'path/to/plugin' 

Vue.use(StringConst) 

und man konnte dies in einer Komponente Vorlage wie folgt:

<div> 
{{ $getStringFor(<component_1_name>, 'key1') }} 
</div> 

Sie können etwas wie this.$getStringFor(<componentName>, key) in einer Methode verwenden. So ziemlich alles, was zu bieten hat.

Warum ich den dritten Punkt nennen härtesten ist: Maintainance wenn Sie jemals Komponentennamen zu ändern, haben Sie vielleicht auch in der vom Plugin zurückgegeben object ändern. Dieses Problem kann wiederum auf viele Arten gelöst werden.

Answer 2

Sie können eine npm module machen mit JSON-Dateien Saiten

Answer 3

enthält

Wenn Sie in Ihrem Projekt nicht verwenden vuex, Ihre Inhalte in einigen JavaScript-Dateien setzen, die im Grunde werden Objekte mit allen statischen Inhalten und importieren wo Sie gerade wie Belmin brauchen I am using Vue js and python flask as my backend. I want to have some local variable set. How can it be done?

Ein ähnlicher Ansatz menionted für Urls, Konfigurationen, Fehler verwendet werden usw.

Wenn Sie vuex verwenden, zentralisieren alles da und machen Getter, die Sie in jedem Ihrer Komponenten verwenden können .