global variables - ¿Cuál es la mejor forma de declarar la variable global en Vue.js?

global-variables

Question

Necesito acceso a mi variable de hostname en cada componente.

¿Es una buena idea ponerlo dentro de los data ?

¿Estoy en lo cierto al entender que, si lo hago, podré llamarlo a todos lados con este this.hostname de this.hostname ?

Answer 1

Para los usuarios de Componente único de archivo, aquí es cómo configuro la (s) variable (s) global (es)

1. Asumiendo que estás usando la plantilla de webpack de Vue-Cli
2. Declara tu (s) variable (s) en algún lugar variable.js
   const shallWeUseVuex = false;
3. Exportarlo en variable.js
   module.exports = { shallWeUseVuex : shallWeUseVuex };
4. Require y asignarlo en su archivo vue
   export default { data() { return { shallWeUseVuex: require(''../../variable.js'') }; } }

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

Answer 2

Advertencia: la siguiente respuesta es usar Vue 1.x. La mutación de datos de dos twoWay se eliminó de Vue 2.x (¡afortunadamente!). Actualizaré la respuesta pronto, en consecuencia.

En el caso de las variables "globales", que se adjuntan al objeto global, que es el objeto de ventana en los navegadores web, la manera más confiable de declarar la variable es establecerla en el objeto global explícitamente:

window.hostname = ''foo'';

Sin embargo, desde la perspectiva jerárquica de Vue (el modelo de vista raíz y los componentes anidados), los datos se pueden pasar hacia abajo (y se pueden mutar hacia arriba si se especifica el enlace bidireccional).

Por ejemplo, si la raíz viewModel tiene un hostname , el valor puede vincularse a un componente anidado con la directiva v-bind:hostname="hostname" como v-bind:hostname="hostname" o en resumen :hostname="hostname" .

Y dentro del componente, se puede acceder al valor enlazado a través de la propiedad de props del componente.

Finalmente, los datos se this.hostname a este. this.hostname de this.hostname y se pueden usar dentro de la instancia actual de Vue si es necesario.

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>

En los casos en que necesitamos mutar los datos de los padres hacia arriba, podemos agregar un modificador .sync a nuestra declaración vinculante como :foo.sync="foo" y especificar que se supone que los ''elementos propuestos'' son datos enlazados de dos twoWay .

Por lo tanto, al mutar los datos en un componente, los datos de los padres se cambiarían respectivamente.

Por ejemplo:

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>