Каков наилучший способ объявить глобальную переменную в Vue.js?

Ответ 1

Внимание: Следующий ответ использует Vue 1.x. twoWay данных twoWay удаляется из Vue 2.x (к счастью!). Соответственно, я уточню ответ.

В случае "глобальных" переменных, которые привязаны к глобальному объекту, который является объектом окна в веб-браузерах, самым надежным способом объявить переменную является его явное указание на глобальном объекте:

window.hostname = 'foo';

Однако с точки зрения перспективы иерархии Vue (модель корневого представления и вложенные компоненты) данные могут передаваться вниз (и могут быть мутированы вверх, если указано привязка TwoWay).

Например, если корень ViewModel имеет А. hostname данные, значение может быть связан с вложенной компонента с v-bind директивы как v-bind:hostname="hostname" или в короткий :hostname="hostname".

А в компоненте доступ к связанному значению можно получить через свойство компонентного props.

В конце концов данные будут this.hostname на this.hostname и могут быть использованы внутри текущего экземпляра Vue, если это необходимо.

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>

Ответ 2

Поскольку вам нужен доступ к переменной вашего имени хоста в каждом компоненте, и для ее изменения на localhost в режиме разработки или на www.your-api.com в рабочем режиме, вы можете определить эту переменную в прототипе.

Как это:

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

И $ hostname будет доступен во всех экземплярах Vue:

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

В моем случае, чтобы автоматически перейти от разработки к производству, я определил прототип $ hostname в соответствии с переменной tip tip Vue в файле, в котором я создал экземпляр Vue.

Как это:

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

Пример можно найти в документации: Документация по добавлению свойств экземпляра.

Подробнее о настройке чаевых можно найти здесь:

Vue документация для производства чаевых

Ответ 3

Для каждого пользователя с одним файловым компонентом, вот как я настраиваю глобальную переменную (ы)

1. Предполагая, что вы используете шаблон веб-пакета Vue-Cli

2. Объявите свою переменную (-и) где-нибудь переменной.js

   const shallWeUseVuex = false;
   

3. Экспортируйте его в переменную.js

   module.exports = { shallWeUseVuex : shallWeUseVuex };
   

4. Require и назначать его в файле vue

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

Ссылка: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

Ответ 4

Я настоятельно рекомендую взглянуть на Vuex, он сделан для глобально доступных данных в Vue.

Если вам нужны только несколько базовых переменных, которые никогда не будут изменены, я бы использовал импорт ES6:

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

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

console.log(config.hostname)

Вы также можете импортировать файл json тем же способом, который может быть отредактирован людьми без знания кода или импортирован в SASS.