मुझे हर घटक में अपने hostname चर तक पहुंच की आवश्यकता है।Vue.js में वैश्विक चर घोषित करने का सबसे अच्छा तरीका क्या है?
क्या यह data के अंदर रखना अच्छा विचार है?
क्या मुझे यह समझने में सही है कि यदि मैं ऐसा करता हूं, तो मैं इसे this.hostname तक हर जगह कॉल कर पाऊंगा?
चेतावनी: निम्नलिखित उत्तर Vue 1.x का उपयोग कर रहा है। twoWay डेटा उत्परिवर्तन Vue 2.x (सौभाग्य से!) से हटा दिया गया है। तदनुसार, मैं जल्द ही उत्तर अपडेट कर दूंगा।
"वैश्विक" चर-कि वैश्विक वस्तु है, जो वेब में विंडो ऑब्जेक्ट चर घोषित करने के लिए ब्राउज़र-सबसे विश्वसनीय तरीका है से जुड़े होते हैं के मामले में वैश्विक वस्तु स्पष्ट रूप पर सेट करने के लिए है
window.hostname = 'foo';
हालांकि वू के पदानुक्रम परिप्रेक्ष्य (रूट व्यू मॉडल और नेस्टेड घटक) फॉर्म को नीचे से पारित किया जा सकता है (और दोवे बाध्यकारी निर्दिष्ट होने पर ऊपर उत्परिवर्तित किया जा सकता है)।
उदाहरण अगर जड़ 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>मामलों है कि हम ऊपर की तरफ माता पिता के डेटा उत्परिवर्तित की जरूरत के लिए, हम :foo.sync="foo" की तरह हमारे बाध्यकारी घोषणा करने के लिए एक .sync संशोधक जोड़ने और निर्दिष्ट करें कि दिए गए 'सहारा' माना जाता है कर सकते हैं 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 और अपने Vue फ़ाइल में आवंटित export default { data() { return { shallWeUseVuex: require('../../variable.js') }; } }रेफरी: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
दुर्भाग्य से डेटा() {} यानी में परिभाषित होने पर willWeUseVuex एक चर है। इसे बदला जा सकता है। हां, आप टेम्पलेट्स या एचटीएमएल में 'const willWeUseVuex' का उपयोग नहीं कर सकते हैं, बल्कि आपको डेटा() {} से वैरिएबल संस्करण का संदर्भ देना होगा - जैसा कि उल्लेख किया गया है, स्थिर नहीं है। –
आप हर घटक में आपके होस्टनाम चर के लिए उपयोग की जरूरत है, और जब तक स्थानीय होस्ट करने के लिए इसे बदलने के लिए के रूप में विकास मोड में, या www.your-api.com पर जब उत्पादन मोड में, आप प्रोटोटाइप में इस चर को परिभाषित कर सकते हैं।
इस तरह:
Vue.prototype.$hostname = 'http://localhost:3000'
और $ होस्ट नाम सभी Vue उदाहरणों में उपलब्ध हो जाएगा:
new Vue({
beforeCreate: function() {
console.log(this.$hostname)
}
})
मेरे मामले में, स्वचालित रूप से उत्पादन करने के लिए विकास से बदलने के लिए, मैं $ परिभाषित किया है मेजबाननाम प्रोटोटाइप फ़ाइल में एक वू उत्पादन टिप चर के अनुसार जहां मैंने वू को तुरंत चालू किया।
इस तरह:
Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'http://localhost:3000' : 'https://www.your-api.com'
एक उदाहरण डॉक्स में पाया जा सकता है: Documentation on Adding Instance Properties
उत्पादन टिप config के बारे में अधिक पाया जा सकता है:
परिभाषित करें "जल्दी ही ", कृप्या। –
मुझे लगता है कि उसका मतलब "कभी नहीं" था। –
उसे जरूरत नहीं है। वू तेज़ था और इसे फिर से कार्यान्वित किया गया: https://vuejs.org/v2/guide/components.html#sync-Modifier – NeoDevlin