He estado aprendiendo vuex4 y allí escribí todos los estados, acciones, captadores... en main.js

Ahora llegué a los módulos y traté de refactorizar mi código a módulos en archivos separados. Todo funciona excepto por un bucle v-for donde los números deberían aparecer pero no lo hacen. El número debería aparecer cuando el número cambia en la aplicación en "historial".

Estoy actualizando la matriz de historial con las mutaciones "addToCounter" y "minToCounter" que se encuentran en counter.js

History.vue (aquí es donde el bucle v-for no funciona)

 <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 (el módulo se guarda en módulos/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 }

principal.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')