Vuex et Vue.js

Muxxable
Javascript

Bonjour,

J'essaie d'installer un store sur Vue.js avec le router, mais il me sort que Vuex n'est pas défini

Ce que je fais

Main.js

import Vue from 'vue'
import Vuex from 'vuex';
import router from './router'

Vue.use(Vuex);

new Vue({
  el: '#app',
  router,
  render: h => h(require('./App'))
})

HelloWorld.vue

import store from './CartStore'

export default {
  store: store,
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

Ce que j'obtiens

Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.

8 réponses

tityus

Salut,

Si tu regardes bien ton message d'erreur, il ne t'indique pas qu'il n'est pas défini mais simplement qu'il doit être défini avant la création de l'instance du store.

Je pense que le problème se situe dans ton "CartStore.js"

Et à mon avis, tu as oublié de mettre dedans :

import Vue from 'vue'

import Vuex from 'vuex';

Vue.use(Vuex);

Muxxable
Auteur

Pourquoi il faut que j'importe Vue,Vuex dans mon CartStore alors que je l'ai défini dans mon main.js ?

De plus, en faisant ça, j'ai :

Uncaught ReferenceError: store is not defined

Pandazaur

Bonjour,

Essaie d'injecter ton store à la racine 

// import store from '....'

new Vue({
  el: '#app',
  router,
  store
  render: h => h(require('./App'))
})
Muxxable
Auteur

J'ai déjà tenté le coup :/

tityus

Tu dois obligatoirement importer ton vuex aussi dans ton store car tu utilises new Vuex.store({}) sinon c'est que ton store n'a pas la bonne syntaxe

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

Vue.use(Vuex)

export default new Vuex.Store({
    state,
    getters,
    mutations
})
Pandazaur

A quoi ressemble ton CartStore.js ?

Muxxable
Auteur

Pour le moment il resemble à ça:

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        //
    },
    mutations : {
        //
    }
})
tityus

Ton store est maintenant correct, donc t'as seconde erreur se situe ailleur.

Pour répondre à ta question : "Pourquoi il faut que j'importe Vue,Vuex dans mon CartStore alors que je l'ai défini dans mon main.js ?"

Tu importes effectivement ton vuex dans ton main mais après ton import de store.

1 => importation de vuex
2 => importation du store
3 => utilisation du vue.use(vuex)

Donc à ce moment la ton store ne connait pas encore Vuex.

Je sais pas si tu t'es posé la question mais, pourquoi tu utilises render: h => h(require('./App')) et pas un simple import d'App ?

C'est parce que l'import va se faire en priorité avant toute action tandis que le render se fera après ton import de vuex.
ça va t'éviter d'avoir cette même erreur dans ton app lorsque tu vas importer ton store et ainsi tu ne seras pas obligé d'importer une fois de plus ton vuex.