web-dev-qa-db-fra.com

Quel est le meilleur moyen de déclarer une variable globale dans Vue.js?

J'ai besoin d'accéder à ma variable hostname dans chaque composant.

Est-ce une bonne idée de le mettre à l'intérieur de data?

Ai-je raison de comprendre que si je le fais, je pourrai l'appeler partout par this.hostname?

global-variablesvue.js
35
Dmitry Bubnenkov

Avertissement: La réponse suivante utilise Vue 1.x. La mutation de données twoWay est supprimée. from Vue 2.x (heureusement!). Je mettrai à jour la réponse prochainement, en conséquence.

Dans le cas de variables "globales", attachées à l'objet global, qui est l'objet window dans les navigateurs Web, le moyen le plus fiable de déclarer la variable consiste à le définir explicitement sur l'objet global:

window.hostname = 'foo';

Quelle que soit la perspective hiérarchique de Vue (la vue racine Model et les composants imbriqués), les données peuvent être transmises vers le bas (et mutées vers le haut si la liaison à deux voies est spécifiée).

Par exemple, si le modèle racine viewModel contient des données hostname, la valeur peut être liée à un composant imbriqué avec v-bind directive comme v-bind:hostname="hostname" ou en bref :hostname="hostname".

Et à l'intérieur du composant, la valeur liée est accessible via la propriété props du composant.

Finalement, les données seront envoyées à this.hostname et peuvent être utilisés dans l’instance actuelle Vue si nécessaire.

var theGrandChild = Vue.extend({
  template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3>',
    props: ['foo', 'bar']
});

var theChild = Vue.extend({
  template: '<h2>My awesome component has a "{{foo}}"</h2> \
             <the-grandchild :foo="foo" :bar="bar"></the-grandchild>',
  props: ['foo'],
  data: function() {
    return {
      bar: 'bar'
    };
  },
  components: {
    'the-grandchild': theGrandChild
  }
});


// the root view model
new Vue({
  el: 'body',
  data: {
    foo: 'foo'
  },
  components: {
    'the-child': theChild
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo="foo"></the-child>

Dans les cas où nous devons muter les données du parent vers le haut, nous pouvons ajouter un .sync modificateur à notre déclaration obligatoire comme :foo.sync="foo" et spécifiez que les "accessoires" donnés sont supposés être des données liées twoWay.

Par conséquent, en modifiant les données d'un composant, les données du parent seraient modifiées respectivement.

Par exemple:

var theGrandChild = Vue.extend({
  template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3> \
             <input v-model="foo" type="text">',
    props: {
      'foo': {
        twoWay: true
      },  
      'bar': {}
    }
});

var theChild = Vue.extend({
  template: '<h2>My awesome component has a "{{foo}}"</h2> \
             <the-grandchild :foo.sync="foo" :bar="bar"></the-grandchild>',
  props: {
    'foo': {
      twoWay: true
    }
  },
  data: function() {
    return { bar: 'bar' };
  },  
  components: {
    'the-grandchild': theGrandChild
  }
});

// the root view model
new Vue({
  el: 'body',
  data: {
    foo: 'foo'
  },
  components: {
    'the-child': theChild
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo.sync="foo"></the-child>
12
Hashem Qolami

Si vous avez besoin d'accéder à votre variable de nom d'hôte dans chaque composant et de la changer en localhost en mode de développement ou en www.your-api.com en mode de production, vous pouvez définir cette variable dans le prototype.

Comme ça:

Vue.prototype.$hostname = 'http://localhost:3000'

Et $ hostname sera disponible dans toutes les instances Vue:

new Vue({
  beforeCreate: function () {
    console.log(this.$hostname)
  }
})

Dans mon cas, pour passer automatiquement du développement à la production, j'ai défini le prototype de $ hostname en fonction d'une variable Vue pointe de production dans le fichier où j'ai instancié le Vue.

Comme ça:

Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'https://www.your-api.com' : 'http://localhost:3000'

Un exemple peut être trouvé dans la documentation: Documentation sur l'ajout de propriétés d'instance

Vous trouverez plus d'informations sur la configuration des conseils de production ici:

Vue documantation pour conseil de production

40
Josiel Faleiros

Pour tous les utilisateurs de composant de fichier unique, voici comment configurer des variables globales.

  1. En supposant que vous utilisez le modèle de webpack de Vue-Cli

  2. Déclarez vos variable (s) dans quelque part variable.js

    const shallWeUseVuex = false;

  3. Exportez-le dans variable.js

    module.exports = { shallWeUseVuex : shallWeUseVuex };

  4. Require et assignez-le dans votre fichier vue

    export default {
    data() {
        return {
            shallWeUseVuex: require('../../variable.js')
        };
    }
}

Réf.: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

8
KuN

Je recommande fortement de jeter un oeil à Vuex , il est conçu pour les données accessibles dans le monde entier dans Vue.

Si vous n'avez besoin que de quelques variables de base qui ne seront jamais modifiées, j'utiliserais les importations ES6:

// config.js
export default {
   hostname: 'myhostname'
}

// .vue file
import config from 'config.js'

console.log(config.hostname)

Vous pouvez également importer un fichier json de la même manière, qui peut être édité par des personnes sans connaissance du code ou importé dans SASS.

2
Fabian von Ellerts