web-dev-qa-db-ja.com

Vue-cliを使用して、グローバル変数をどこで宣言しますか？

ほとんどのVue.jsチュートリアルでは、次のようなものが表示されます

new Vue({
  store, // inject store to all children
  el: '#app',
  render: h => h(App)
})

しかし、私はvue-cliを使用しています（実際にはクエーサーを使用しています）。これはVueインスタンスを宣言しているので、どこに自分が欲しいと言うのかわかりませんstoreは「Vue全体」のグローバル変数になります。どこで指定しますか？ありがとう

javascriptvue.jsglobalquasar
8
Louis Ameline

ええ、エントリポイントファイル（main.js）で次のような変数を設定できます。

Vue.store= Vue.prototype.store = 'THIS IS STORE VARIABLE';

後でvueインスタンスで次のようにアクセスします：

<script>
export default {
  name: 'HelloWorld',
  methods: {
    yourMethod() {
        this.store // can be accessible here.
    }
  }
}
</script>

これは vue-docs here でも確認できます。

編集1：

quasarのテンプレートの「エントリポイントファイルなし」に関するコメントセクションの議論から。

src/router/index.jsに移動すると、Vueにアクセスできます。Vueを使用して、次のようなグローバル変数を設定できます。

...
import routes from './routes'

Vue.prototype.a = '123';

Vue.use(VueRouter)
...

そして、それをconsole.logでApp.vueに記録すると、次のようになります：

<script>
export default {
  name: 'App',
  mounted() {
        console.log(this.a);
  }
}
</script>

今、あなたのコンソールを見てください： enter image description here

ScriptタグのApp.vueファイルでも同じことができます。

5
Daksh Miglani

store aglobal変数をすべてのコンポーネント（this.$store）およびVueインスタンス自体は、初期宣言後にストアにアクセスできます。

App Vuex Store 。のQuasarのドキュメントをご覧ください

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    updateCount(state) {
      state.count += 1
    }
  }
})

main.js

import App from './App.vue'
import store from '/path/to/store.js'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

コンポーネント内からstoreにアクセスする必要がある場合は、（main.jsで行ったように）インポートして直接使用することができます[これは悪いことに注意してくださいpractice]またはthis.$storeを使用してアクセスします。それについてもう少し読むことができます here 。

いずれにせよ、ここに 公式の入門ガイド Vuexチームから

2
GMaiolo

インスタンスプロパティ を追加できます

このように、インスタンスのプロパティを定義できます。

Vue.prototype.$appName = 'My App'

これで、作成前であっても、すべてのVueインスタンスで$ appNameを使用できます。

実行する場合：

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

次に、「My App」がコンソールに記録されます！

2
Liju Kuriakose

前述の回答に対して少し冗長ですが、この返信の時点で、現在の Vuex状態のドキュメント により、これがより簡単であることがわかりました。

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      // example
    },
    state: {
      cdn_url: 'https://assets.yourdomain.com/'
    },

    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}

...そしてコンポーネントで、例えばYourPage.vuex

export default {
  name: 'YourPage',
  loadImages: function () {
    img.src = this.$store.state.cdn_url + `yourimage.jpg`
  }
}
0
martenc