Блог

Я изучал vuex4 и там написал все состояния,действия,геттеры… в main.js

Теперь я добрался до модулей и попытался преобразовать свой код в модули в отдельных файлах. Все работает, за исключением одного цикла v-for, где числа должны появляться, но не появляются. Номер должен отображаться при изменении номера в приложении в разделе «история».

Я обновляю массив истории с мутациями «addToCounter» и «minToCounter», найденными в counter.js

History.vue (здесь цикл v-for не работает)

   <div class="container">
    <h4>History</h4>
    <div class="flex">
      <p
        v-for="(number,index) in history"
        :key="index"
        :class="activeIndexes(parseInt(value)).includes(index) amp;amp; '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 (модуль сохраняется в 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=1amp;min=-1000amp;max=1000amp;col=1amp;base=10amp;format=plainamp;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')
 

разобрался в этом :).

в истории.vue

Я изменился:

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

а потом для в-для

 v-for="(number,index) in history" → v-for="(number,index) in counter.history"