¿Cuál es la mejor manera de declarar una variable global en Vue.js?

Solución:

Como necesita acceder a su variable de nombre de host en cada componente, y cambiarlo a localhost mientras está en modo de desarrollo, o al nombre de host de producción cuando está en modo de producción, puede definir esta variable en el prototipo.

Como esto:

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

Y $ hostname estará disponible en todas las instancias de Vue:

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

En mi caso, para cambiar automáticamente de desarrollo a producción, definí el prototipo $ hostname de acuerdo con una variable de sugerencia de producción de Vue en el archivo donde instancia el Vue.

Como esto:

Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'https://hostname' : 'http://localhost:3000'

Se puede encontrar un ejemplo en los documentos: Documentación sobre cómo agregar propiedades de instancia

Puede encontrar más información sobre la configuración de la sugerencia de producción aquí:

Documentación de Vue para sugerencia de producción

Advertencia: La siguiente respuesta está usando Vue 1.x. los twoWay La mutación de datos se elimina de Vue 2.x (¡afortunadamente!).

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

window.hostname="foo";

Sin embargo, desde la perspectiva de la jerarquía 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 de dos vías).

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

Y dentro del componente, se puede acceder al valor límite a través del componente props propiedad.

Eventualmente, los datos se transferirán a this.hostname y se puede 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 necesitemos mutar los datos de los padres hacia arriba, podemos agregar un .sync modificador a nuestra declaración vinculante como :foo.sync="foo" y especificar que se supone que los ‘accesorios’ dados son un twoWay datos encuadernados.

Por lo tanto, al mutar los datos en un componente, los datos del padre 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>

Recomiendo encarecidamente echar un vistazo a Vuex, está hecho para datos accesibles globalmente en Vue.

Si solo necesita algunas variables base que nunca se modificarán, usaría las importaciones de ES6:

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

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

console.log(config.hostname)

También puede importar un json archivo de la misma manera, que puede ser editado por personas sin conocimientos de código o importado a SASS.

---

---

Utiliza Nuestro Buscador