0

Mi store me esta dando error cuando llamo al mapState.

Mi store.js es :

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        showLoader:false
    },
    mutations:{
        toggleShowLoader(state,visible){
            state.showLoader = visible;
        }
    }
});

export default store

Mi App.vue :

<template>
  <div id="app">
    <RegisterForm></RegisterForm>
    <div
      v-show="showLoader"
      @showLoader="toggleShowLoader(true)"
      @hideLoader="toggleShowLoader(false)"
    >
      <half-circle-spinner
            :animation-duration="1000"
            :size="120"
            color="#ff1d5e"
            style="  position: fixed;
                    left: 50%;
                    top: 50%;
                    z-index: 9999;
                    margin:0 auto;
                    "
      />
    </div>
   
  </div>
</template>

<script>
import RegisterForm from './components/RegisterForm.vue'
import { HalfCircleSpinner } from 'epic-spinners'
import {mapState} from 'vuex'

export default {
  name: 'App',
  components: {
    RegisterForm,
    HalfCircleSpinner
},
data(){
  return{
    loader:{
      visible:false
    }
  }
},
  methods: {
  },
  computed:{
    ...mapState([
      'showLoader'
    ])
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  /* margin-top: 60px; */
}

/* TRANSICION DE IZQUIERDA A DERECHA */

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all 1s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(700px);
  opacity: 0;
}

/* TRANSICION DE MENOS A MAS */
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

</style>

Pues a la hora de usar el mapState me arroja los siguientes errores:

[Vue warn]: Error in render: "TypeError: this.$store is undefined"

TypeError: this.$store is undefined

Yo me he creado el store, que es el manejador de vuex, lo he exportado desde el fichero store/index.js y lo he importado y asignado en App.vue. Deberia de estar globalmente visible.

h3. Aclaracion del error.

El Error se esta generando en App.vue a la hora de usar, dentro de computed, el mapState.

h5. Tambien dejo el main.js , donde asigno el store del vuex a mi app de vuejs:

import Vue from 'vue'
import App from './App.vue'
import 'es6-promise/auto'
import {store} from './store/index'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.config.productionTip = false
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)


new Vue({
  render: h => h(App),
  store:store,
  mode:'history'
}).$mount('#app')
2
  • que es computed en tu store? nunca lo vi, y no esta en la documentacion...
    – gbianchi
    el 2 nov. 2021 a las 13:14
  • @gbianchi He actualizado la pregunta, efectivamente era un error. Gracias. Pero no era el causante de este problema.
    – josanangel
    el 2 nov. 2021 a las 13:20

1 respuesta 1

0

Parece ya estar corregido, parecia ser por la forma de importar el store en App.vue , yo lo estaba haciendo de esta manera:

import {store} from './store/index'

Siendo la forma correcta:

import store from './store/index'

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.