VueX模块未触发动作

Question

我遵循这个教程Vuex分页(https://whatthecode.dev/easy-vuejs-vuex-pagination/?utm_source=rss&utm_medium=rss&utm_campaign=easy-vuejs-vuex-pagination)

唯一的区别是我改变了我的API请求，但是我可以从状态中检索前端数据，但不能触发动作。我是VueX的新手，有人能指出这个错误吗?

PS:它永远不会到达console.log("Let's get")

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import volumes, { VOLUMES_MODULE } from './volumes';
Vue.use(Vuex);

const store = new Vuex.Store ({
    modules: {
        [VOLUMES_MODULE]: volumes,
    },
});
export default store;

卷/index.js

import state from './state';
import actions from './actions';
export const VOLUMES_MODULE = 'volumes'
export default {
    namespaced: true,
    actions,
    state,
}
export * from './state'

卷/actions.js

import VolumeService from '../../services/VolumeService';
import {
    SET_DATA,
    SET_PAGINATION,
} from './mutations'
import state from './state';
export const FETCH_VOLUMES = 'load_volumes'
const volumeService = new VolumeService();
export default {
    async [FETCH_VOLUMES]({ commit }, payload) {
      console.log("Let Get");
      const volumes = await volumeService.getTwentyVolumes({
        ...state.pagination,
        ...payload,
      })
  
      commit(SET_DATA, volumes.data)
      commit(SET_PAGINATION, {
        page: 2,
        limit: 20,
        totalPages: 2,
      })
    },
}

卷/mutations.js

export const SET_PAGINATION = 'set_pagination'
export const SET_DATA = 'set_data'
export default {
    [SET_PAGINATION](state, pagination) {
        state.pagination = pagination
    },
    [SET_DATA](state, data) {
        state.data = data
    },
}

卷/state.js

export const VOLUMES = 'data'
export const PAGINATION = 'pagination'
export default {
    [VOLUMES]: [],
    [PAGINATION]: {
        page: 1,
        limit: 20,
        totalPages: 1,
    },
}

Answer 1

首先检查你是否已经安装了store到你的视图，通常在main.js中，你new一个Vue实例，代码应该像这样:

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

然后在要调用load_volumes的组件中，使用mapActions添加此函数。代码示例:

<script>
import {mapActions} from 'vuex'
export default {
  name: "App",
  components: {
   
  },
  methods: {
    ...mapActions({load_volumes: 'volumes/load_volumes'})
  },
  mounted(){
      this.load_volumes()
     }
}
</script>

的工作示例可以在这里找到:https://codesandbox.io/s/call-vuex-actions-in-components-msdyo