web-dev-qa-db-ja.com

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

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

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

そうすれば、this.hostnameでどこでも呼び出すことができるということを理解できますか？

global-variablesvue.js
35
Dmitry Bubnenkov

警告：次の答えはVue 1.xを使用しています。 twoWayデータ変更はVue 2.xから削除されました（残念ながら！）。それに応じて、すぐに回答を更新します。

Webブラウザのウィンドウオブジェクトであるグローバルオブジェクトに接続されている「グローバル」変数の場合、変数を宣言する最も信頼できる方法は、グローバルオブジェクトに明示的に設定することです。

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"修飾子を追加し、指定された「props」が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>
12
Hashem Qolami

すべてのコンポーネントでホスト名変数にアクセスし、開発モードではlocalhostに変更し、本番モードではwww.your-api.comに変更する必要があるため、プロトタイプでこの変数を定義できます。

このような：

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

また、$ hostnameはすべてのVueインスタンスで使用可能になります。

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

私の場合、開発から本番に自動的に変更するために、Vueをインスタンス化したファイルのVue本番用のヒント変数に従って$ hostnameプロトタイプを定義しました。

このような：

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

例はドキュメントにあります： インスタンスプロパティの追加に関するドキュメント

プロダクションチップの設定の詳細については、こちらをご覧ください

制作のヒントのVue文書化

40
Josiel Faleiros

単一ファイルコンポーネントユーザーの場合、グローバル変数を設定する方法は次のとおりです。

  1. Vue-Cliのwebpackテンプレートを使用していると仮定します

  2. Variable.jsのどこかに変数を宣言します

    const shallWeUseVuex = false;

  3. Variable.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

8
KuN

Vuex を確認することを強くお勧めします。これは、Vueでグローバルにアクセス可能なデータ用に作成されています。

変更されない基本変数がいくつか必要な場合は、ES6インポートを使用します。

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

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

console.log(config.hostname)

同じ方法でjsonファイルをインポートすることもできます。これは、コードの知識のない人が編集したり、SASSにインポートしたりできます。

2
Fabian von Ellerts