With Vue-cli, where do I declare my global variables?
Yea, you can set those variables like this, in your entrypoint file (main.js):
Vue.store= Vue.prototype.store = 'THIS IS STORE VARIABLE';
and later access it in your vue instance like this:
<script>export default { name: 'HelloWorld', methods: { yourMethod() { this.store // can be accessible here. } }}</script>
You can also see this in the vue-docs here.
Edit 1:
from the discussions in the comment sections about "no entrypoint file" in quasar's template.
what you can do is, to go to src/router/index.js, and there you will be able to get access to Vue, through which you can set a global variable like this:
...import routes from './routes'Vue.prototype.a = '123';Vue.use(VueRouter)...
and then if you console.log it in App.vue
, something like this:
<script>export default { name: 'App', mounted() { console.log(this.a); }}</script>
You can also do the same in App.vue
file in the script tag.
We could add the Instance Properties
Like this, we can define instance properties.
Vue.prototype.$appName = 'My App'
Now $appName is available on all Vue instances, even before creation.
If we run:
new Vue({ beforeCreate: function() { console.log(this.$appName) }})
Then "My App" will be logged to the console!
You don't need to make the store
a global variable like that, as every component (this.$store
) and the Vue instance itself have access to the store after the initial declaration.
Take a look at the Quasar docs for App Vuex Store.
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)})
If you need to access the store
from within a component you can either import it (as we did in main.js
) and use it directly [note that this is a bad practice] or access using this.$store
. You can read a bit more about that here.
In any case here's the official Getting Started guide from Vuex team