Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

210
Visualizações
Vuex 4 modules not working when refactoring modules to seprate files

I've been learning vuex4 and there I wrote all state,actions,getters... in main.js

Now I've gotten to modules and I tried to refactor my code to modules in seprate files. Everything is working except for one v-for loop where numbers should appear but do not. The number should appear when number changes on the app under "history".

I'm updating history array with mutations "addToCounter" and "minToCounter" found in counter.js

History.vue (this is where v-for loop doesn't work)

  <div class="container">
    <h4>History</h4>
    <div class="flex">
      <p
        v-for="(number,index) in history"
        :key="index"
        :class="activeIndexes(parseInt(value)).includes(index) && 'bold'"
      >
       {{number}}
      </p>
    </div>
    <input
      type="text"
      placeholder="search by index"
      v-model="value"
    >
  </div>
</template>

<script>
import {mapState, mapGetters} from "vuex";

export default {
  data(){
    return{
      value: 0,
    }
  },
  computed: {
    ...mapState(['history']),
    ...mapGetters(['activeIndexes']),
  }
}
</script>

<style>...</style>

counter.js (the module is saved in modules/counter.js)

import axios from "axios";

const state = {
        counter: 0,
        history: [0],
};
const mutations = {
    addToCounter(state, payload){
        state.counter = state.counter + payload;
        state.history.push(state.counter)
    },
    minToCounter(state, payload){
        state.counter = state.counter - payload;
        state.history.push(state.counter)
    }
};
const actions = {
    //async je takrt k zahtevamo nek http request npr od api-ja spodnji primer:
    async addRandomNumber(context) {
        let data = await axios.get('https://www.random.org/integers/?num=1&min=-1000&max=1000&col=1&base=10&format=plain&rnd=new');
        context.commit("addToCounter",data.data);
    }
};
const getters = {
    activeIndexes: (state) => (payload) => {
        let indexes = [];
        state.history.forEach((number, index) => {
            if(number === payload) {
                indexes.push(index)
            }
        });
        return indexes
    }
};

export default {
    state,mutations,actions,getters
}

main.js

import { createApp } from 'vue'
import { createStore } from 'vuex';
import counter from "./modules/counter";

import App from './App.vue'

const store = createStore({
    modules: {
        counter: counter,
    }
})

createApp(App).use(store).mount('#app')
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

figured it out :).

in History.vue

I changed:

computed: {
…mapState([‘history’]), → …mapState([‘counter’]) //as module name is counter
…mapGetters([‘activeIndexes’]),
}

and then for v-for

v-for="(number,index) in history" → v-for="(number,index) in counter.history"
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda