web-dev-qa-db-fra.com

Avec Vue-cli, où puis-je déclarer mes variables globales?

Dans la plupart des tutoriels de Vue.js, je vois des choses comme

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

Mais j'utilise vue-cli (j'utilise en fait quasar) et il déclare l'instance Vue pour moi, donc je ne sais pas où je suis censé dire que je veux que store soit un "Vue-wide" variable globale. Où est-ce que je précise cela? Merci

javascriptvue.jsglobalquasar
7
Louis Ameline

Oui, vous pouvez définir ces variables comme ceci, dans votre fichier de point d'entrée (main.js):

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

et y accéder plus tard dans votre instance de vue comme ceci:

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

Vous pouvez aussi voir ceci dans vue-docs ici .

Modifier 1:

à partir des discussions dans les sections de commentaires sur "pas de fichier d'entrée" dans le modèle de quasar.

ce que vous pouvez faire est d'aller à src/router/index.js, et là vous pourrez accéder à Vue, à travers lequel vous pouvez définir une variable globale comme celle-ci:

...
import routes from './routes'

Vue.prototype.a = '123';

Vue.use(VueRouter)
...

et puis si vous le consolez.log dans App.vue, quelque chose comme ceci:

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

maintenant, regardez votre console:  enter image description here

Vous pouvez également faire la même chose dans le fichier App.vue dans la balise de script.

3
Daksh Miglani

Vous n'avez pas besoin de définir la variable store comme une variable globale, car chaque composant (this.$store) et l'instance Vue ont eux-mêmes accès au magasin après la déclaration initiale.

Consultez la documentation Quasar pour 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)
})

Si vous devez accéder à la store depuis un composant, vous pouvez l'importer (comme nous l'avons fait dans main.js) et l'utiliser directement (notez qu'il s'agit d'une mauvaise pratique) ou accéder via this.$store. Vous pouvez en lire un peu plus à ce sujet ici .

Dans tous les cas, voici le guide de démarrage officiel de l'équipe de Vuex

2
GMaiolo

Nous pourrions ajouter les propriétés de Instance

Comme cela, nous pouvons définir des propriétés d'instance.

Vue.prototype.$appName = 'My App'

Désormais, $ appName est disponible sur toutes les instances Vue, même avant la création.

Si nous courons:

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

Ensuite, "Mon application" sera connecté à la console!

1
Liju Kuriakose