Мне нужен доступ к моей переменной hostname
в каждом компоненте.
Это хорошая идея поместить его в data
?
Правильно ли я понимаю, что если я это сделаю, я смогу назвать это повсюду this.hostname
?
Мне нужен доступ к моей переменной hostname
в каждом компоненте.
Это хорошая идея поместить его в data
?
Правильно ли я понимаю, что если я это сделаю, я смогу назвать это повсюду this.hostname
?
Внимание: Следующий ответ использует 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>
Поскольку вам нужен доступ к переменной вашего имени хоста в каждом компоненте, и для ее изменения на 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'
Пример можно найти в документации: Документация по добавлению свойств экземпляра.
Подробнее о настройке чаевых можно найти здесь:
Для каждого пользователя с одним файловым компонентом, вот как я настраиваю глобальную переменную (ы)
Объявите свою переменную (-и) где-нибудь переменной.js
const shallWeUseVuex = false;
Экспортируйте его в переменную.js
module.exports = { shallWeUseVuex : shallWeUseVuex };
Require
и назначать его в файле vue
export default {
data() {
return {
shallWeUseVuex: require('../../variable.js')
};
}
}
Ссылка: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
Я настоятельно рекомендую взглянуть на Vuex, он сделан для глобально доступных данных в Vue.
Если вам нужны только несколько базовых переменных, которые никогда не будут изменены, я бы использовал импорт ES6:
// config.js
export default {
hostname: 'myhostname'
}
// .vue file
import config from 'config.js'
console.log(config.hostname)
Вы также можете импортировать файл json
тем же способом, который может быть отредактирован людьми без знания кода или импортирован в SASS.