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