0

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>      `
}
4
  • podrias compartir ../components/barProgreso.js' ? parece que alli esta el problema Commented el 19 sept. 2020 a las 17:00
  • de hecho es el que dice componente, el app.js es el archivo que agrego al index.html, el store js lo importo al app.js al igual que el componente o ../components/barProgreso.js. Desde ese archivo trato de mandar a llamar en el created a getDocumentos que se supone que es un action del store. Lo siento voy empezando con esto Commented el 19 sept. 2020 a las 17:46
  • 1
    en created() { getDocumentos(); }, cambialo por created() { ...getDocumentos(); }, o created() { getDocumentos : getDocumentos(); }, Commented el 19 sept. 2020 a las 17:50
  • Te agradezco tu apoyo, intente eso, pero me seguia marcando error, trabajar con las cdn es complicado, debido que en mi entorno de desarrollo no tengo acceso la ssh y para instalar todo de manera global por eso uso cdn. Navegando por ahi esto fue mi solucion, en el componente donde mapeo los actions, state y las mutations, puse esto hasta el principio del modulo: Vue.use(Vuex); y el action lo llame con el this.getDocumentos(). Commented el 19 sept. 2020 a las 20:11

1 respuesta 1

0

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>      `
}

Tu Respuesta

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

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