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')