重构模块以分隔文件时，Vuex 4 模块不起作用

Question

我一直在学习 vuex4，我在 main.js

中编写了所有状态、动作、吸气剂...

现在我已经开始使用模块了，我试图将我的代码重构为单独文件中的模块。一切正常，除了一个 v-for 循环，数字应该出现但没有出现。当应用程序的“历史记录”下的号码发生变化时，应该会出现该号码。

我正在使用 counter.js

中发现的突变“addToCounter”和“minToCounter”更新历史数组

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) && '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=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')

Answer 1

想通了:)。

在History.vue

我改了：

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

然后是 v-for

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

重构模块以分隔文件时，Vuex 4 模块不起作用

Vuex 4 modules not working when refactoring modules to seprate files

javascript

vue.js

vuex-modules

vuex4