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> `
}
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP