web-dev-qa-db-fra.com

Vue.js et vuex: ce. $ Store n'est pas défini

J'ai déjà lu la question avec des titres similaires mais je ne peux pas les suivre en raison de leur complexité. Je pense qu'avec mon code, il sera plus facile de trouver une solution pour moi. Je vais seulement inclure le code correspondant.

Ma boutique est la suivante: obs: j'ai installé le plugin vuex.

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


Vue.use(Vuex)

const state = {
    titulo: "please, change title"
}


const mutations = {
    changeTitle(state, title) {
        state.title= title
    }
}


export default new Vuex.Store({

    state : state,
    mutations : mutations
})

My App.vue

 <template>
    <div>
      <show-title-component ></show-title-component>
      <change-title-component></change-title-component>
    </div>
</template>

<script>


import ShowTitleComponent from './components/ShowtitleComponent';
import ChangeTitleComponent from './components/ChangeTitleComponent';
import store from './vuex/store';

export default {

components: {ShowTitleComponent, ChangeTitleComponent},
store,
data: function() {
  return {title: 'placeholder'}
}


}
</script>

Le composant qui génère l'erreur:

<template><div>{{ title}}</div></template>

<script>

export default {
    name: "show-title-component",
    computed: {
      title() {
        return this.$store.state.title   /** error   here */
      }
    }
}

</script>
typescriptvue.jsvuejs2
10
Diego Alves

Le fichier de stockage doit être un fichier Javascript (.js). La modification du nom de fichier et le redémarrage du serveur font disparaître l'erreur this. $ Tore.

L'erreur était en fait ici:

App.vue

import store from './vuex/store';  /** in my case, it should be js file. */
1
Diego Alves

Peut-être que vous n'avez pas inclus le store dans l'instance Vue

Votre point d'entrée d'application (app.js ou main.js ou index.js) doit inclure ce code:

import store from './store'

new Vue({
 ...
 store,
 ...
})

alors vous pouvez utiliser this.$store dans n'importe quel composant

mais je recommande l'architecture générale: https://vuex.vuejs.org/en/structure.htmlenter image description here

14
Volodymyr Symonenko

Assurez-vous de le créer un répertoire de magasin

2. npm i vuex -S

3.Assurez-vous que src／store/index.js A import Vuex from 'vuex' Et Vue.use(Vuex)

4.Assurez-vous que src／main.js A import store from './store'

0
朱晓鹏

Dans mon cas, j'utilisais des modules. Je pouvais accéder aux mutations, actions et getters sans aucun problème. Mais pas l'Etat. La solution consiste à utiliser l'état des modules pour accéder à l'espace de noms du module.

Consultez la documentation pour plus d'informations.

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
}

const store = new Vuex.Store({
    modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

Par défaut, les actions, mutations et getters à l'intérieur des modules sont toujours enregistrés sous l'espace de noms global

0
uiroshan