TransWikia.com

[Vue warn]: Error in created hook: "ReferenceError: getDocumentos is not defined" found in --->

Stack Overflow en español Asked by Brayan Gonzalez on December 1, 2020

voy empezando en vue y javascript con esto de la exportación e importación de módulos y componentes en vue, yo normalmente hacia con Vue.component y no había tenido problemas en mapear el state, las mutaciones y los actions ahora en esta nueva manera de implementar me gustaría saber como poder mapear estos tres elementos. Si alguien puede ayudarme se lo agradecería mucho.

app.js

import barProgreso from '../components/barProgreso.js';
import store from './store.js';
const app = new Vue({
    el:'#app',
    store:store,
    components: {
        'bar-progreso'     : barProgreso,
    }
})

store module->store.js

export default new Vuex.Store({
    state:{
        documentos:[],
    },
    mutations:{
        setDocumentos(docs){
            this.state.documentos = docs;
        }
    },
    actions:{
        getDocumentos:async function({commit}){
            const data = await fetch('documentos.json');
            const documentos = await data.json();
            commit("setDocumentos", documentos)
        }
    }
})

Componente ../components/barProgreso.js’

export default{
    mounted(){        
    },
    data: function () {
        return {                         
            percentage: 50,
            percent:50
        }
    },
    computed: {
        ...Vuex.mapState(['documentos'])
    },
    methods:{
        ...Vuex.mapMutations(['setDocumentos']),
        ...Vuex.mapActions(['getDocumentos'])
    },

    created() {
        getDocumentos();
    },

    template: `
    <div>
        <div class="container">
        <div>{{ percent }}%</div>
        <div class="loading-bar">
            <div class="percentage" :style="{'width' : percentage + '%'}"></div>
        </div>
        </div>
   </div>      `
}

One Answer

En mi caso como estoy usando cdns, debido a que en mi entorno no puedo instalar los recursos de manera global, ya que no tengo acceso a la terminal para hacerlo.

Navegando por ahí encontré esto. Si deseas mapear actions, state y mutations en algun modulo que usas como componente, al principio del documento usas

Vue.use(Vuex);

Los actions y mutations los mandas a llamar con la palabra reservada this dentro del componente.

El componente barProgreso quedaria asi de la siguiente manera

Vue.use(Vuex);

export default{
    mounted(){        
    },
    data: function () {
        return {                         
            percentage: 50,
            percent:50
        }
    },
    computed: {
        ...Vuex.mapState(['documentos'])
    },
    methods:{
        ...Vuex.mapMutations(['setDocumentos']),
        ...Vuex.mapActions(['getDocumentos'])
    },

    created() {
        this.getDocumentos();
    },

    template: `
    <div>
        <div class="container">
        <div>{{ percent }}%</div>
        <div class="loading-bar">
            <div class="percentage" :style="{'width' : percentage + '%'}"></div>
        </div>
        </div>
   </div>      `
}

Answered by Brayan Gonzalez on December 1, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP