Мне нужен доступ к моей переменной hostname в каждом компоненте.Каков наилучший способ объявить глобальную переменную в Vue.js?
Это хорошая идея положить его внутрь data?
Я правильно понимаю, что если я это сделаю, я смогу называть его повсюду на this.hostname?
Предупреждение: Следующий ответ использует Vue 1.x. Мутация данных twoWay удалена из Vue 2.x (к счастью!). Соответственно, я уточню ответ.
В случае «глобальных» переменных-, которые прикреплены к глобальному объекту, который является объектом окна в веб-браузерах-самый надежный способ объявить переменную, чтобы установить его на глобальный объект явно:
window.hostname = 'foo';
Однако форма представления перспективы иерархии Vue (модель корневого представления и вложенные компоненты) данные могут передаваться вниз (и могут быть мутированы вверх, если указано привязка TwoWay).
Например, если корень ViewModel имеет А. hostname данных, значение может быть связанно с вложенным компонентом с v-bind директивой, как v-bind:hostname="hostname" или в коротком :hostname="hostname".
И в рамках компонента доступное значение может быть получено через свойство компонента props.
В конце концов данные будут проксированы до 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>В тех случаях, которые мы должны мутировать данные родительские вверх, мы можем добавить модификатор .sync нашего связывания декларации как :foo.sync="foo" и указать, что данные «реквизит», как предполагается, чтобы быть связанными данными twoWay.
Следовательно, путем изменения данных в компоненте данные родителя будут изменены соответственно.
Например:
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>ни для одного пользователей компонентов файла, вот как я установить глобальную переменную (ы)
const shallWeUseVuex = false;module.exports = { shallWeUseVuex : shallWeUseVuex };Require и назначить его в файл вю export default { data() { return { shallWeUseVuex: require('../../variable.js') }; } }Ref: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
К сожалению, переменная weWeUseVuex является переменной, если она определена в data() {}, то есть ее можно изменить. Увы, вы не можете использовать «const theWeUseVuex» в шаблонах или HTML, скорее вам нужно ссылаться на версию переменной из data() {} - которая, как уже упоминалось, не константа. –
Как вам нужен доступ к переменной хоста в каждом компоненте, и изменить его на локальный время в режиме разработки или на www.your-api.com в режиме производства вы можете определить эту переменную в прототипе.
Как это:
Vue.prototype.$hostname = 'http://localhost:3000'
И $ Имя хоста будет доступна во всех случаях Vue:
new Vue({
beforeCreate: function() {
console.log(this.$hostname)
}
})
В моем случае, чтобы автоматически перейти от разработки до производства, я определил $ прототип хоста в соответствии с переменной вершины производства Vue в файле, где я создал экземпляр Vue.
Как это:
Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'http://localhost:3000' : 'https://www.your-api.com'
Пример можно найти в документации: Documentation on Adding Instance Properties
Подробнее о продукции острия конфигурации можно найти здесь:
Определение «в ближайшее время ", пожалуйста. –
Думаю, он имел в виду «никогда». –
Ему не нужно. Vue был быстрее и повторно реализовал его: https://vuejs.org/v2/guide/components.html#sync-Modifier – NeoDevlin