Vue.jsでグローバル変数を宣言する最良の方法は何ですか？

Question

すべてのコンポーネントで変数hostnameにアクセスする必要があります。

dataの中に入れるのはいいですか？

私がそうするなら、私はそれをどこでもthis.hostnameで呼ぶことができますか？

Answer 1

警告：次の回答は、Vue 1.xを使用しています。 twoWayデータ変異は、Vue 2.xから削除されています（幸いにも！）。私はすぐに答えを更新します。

：「グローバル」変数 - ウェブでウィンドウオブジェクトであるブラウザ、変数を宣言するための最も確実な方法は、明示的にグローバルオブジェクトにそれを設定することでグローバルオブジェクトに添付された場合には

window.hostname = 'foo'; 

しかし、Vueの階層パースペクティブ（ルートビューモデルとネストされたコンポーネント）を作成すると、データは下方向に渡すことができます（twoWayバインディングが指定されている場合は上方向に変更できます）。例えば

ルートビューモデルはhostnameデータを持っている場合、値はv-bind:hostname="hostname"として、または短い:hostname="hostname"でv-bind指令とネストされたコンポーネントに結合させることができます。

コンポーネント内では、バインドされた値にはコンポーネントの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修飾子を追加して、与えられた「小道具」が想定されていることを指定することができますバインドされたデータになるようにします。

したがって、コンポーネント内のデータを変更することによって、親のデータがそれぞれ変更されます。例えば

：ここに任意の単一ファイルコンポーネントのユーザーの場合

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>

Answer 2

は、私はあなたがVue-を使用していると仮定すると、グローバル変数（S）

1. を設定する方法ですCliのwebpackテンプレート
2. 変数をどこかvariable.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あなたはすべてのコンポーネントで、あなたのホスト名の変数にアクセスする必要がある、としばらくlocalhostにそれを変更すると

Answer 3

プロダクションモードでは開発モードでは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 documantation for production tip