Erstellen einer globalen Variable in Vue.js

Question

In Vue.js 0.12 war es einfach genug, eine Variable von der Wurzel-Komponente bis hinunter zu seinen Kindern zu übergeben: Sie verwenden einfach inherit: true für jede Komponente, die die Daten benötigt Elternteil.

Vue.js 1.0 entfernt die Fähigkeit, inherit: true zu verwenden. Verständlicherweise sollte man nicht ständig alles überall erben.

Dies ist jedoch ein Problem beim Upgrade von 0.12 auf 1.0. Ich habe Komponenten mit inherit, die meisten nur so, dass es die wichtige Konfigurationsvariable baseurl von der Root-Komponente erhalten kann. Solch eine Variable sollte definitiv von jeder Komponente, die eine Verbindung darin hat, bekannt sein.

<a href="{{ baseurl }}/page">Link</a>

ich könnte die Stütze für Config auf jede einzelne Komponente zu übergeben, aber das scheint wirklich überflüssig und klobig.

<c0 :config="{baseurl: 'example.com'}"></c0>

<c1 :config="config"></c1>

<c2 :config="config"></c2>

<c3 :config="config"></c3>

eine gute Möglichkeit, einen globalen Rahmen für alle Komponenten zu schaffen?

Answer 1

Dies ist vielleicht nicht die beste Lösung, aber es funktioniert und ist nicht zu viel Mühe. Ich habe nur eine Getter-Prototyp-Methode eingestellt.

Vue.prototype.$config = function (key) { 
    var config = this.$root.$get('config'); 

    if (config) { 
    return config[key]; 
    } 

    return ''; 
} 

<a href="{{ $config('baseurl') }}/page">Link</a>

Erreichbar mit einer beliebigen Komponente.

Answer 2

zu sehen: vue-config

npm install vue-config 

const vueConfig = require('vue-config') 
const configs = { 
    API: 'http://localhost:6003' // It's better to require a config file 
} 

Vue.use(vueConfig, configs) 

// A param named `$config` will be injected in to every 
// component, so in your component, you can get config easily 
const API = this.$config.API 

vuex kann für die Definition konstant zu schwer sein. Sobald Ihr Problem jedoch gelöst ist, müssen Sie einen Blick auf Vuex werfen.

Answer 3

Wenn Sie in Ihrem Vue-Setup etwas wie Webpack verwenden, können Sie eine Variable über Ihr Projekt hinweg mit ES6 modules/import-Anweisungen teilen.

main.js:

import Vue from 'vue' 
import config from './config.js' 
import thing from './thing.js' 

config.setColor('green'); 

var vm = new Vue({ 
    el: "#app", 
    components: { thing }, 
    template: '<thing></thing>' 
}); 

config.js:

var color = 'blue'; 

export default { 
    getColor: function() { 
     return color; 
    }, 
    setColor: function (val) { 
     color = val; 
    } 
} 

thing.js:

import config from './config.js' 

export default { 
    name: 'thing', 
    template: '<div>thing</div>', 
    created: function() { 
     console.log(config.getColor()); 
     // green 
    } 
}