VueX 模块不触发动作答案

【问题标题】：VueX module not triggering actionsVueX 模块不触发动作
【发布时间】：2021-09-30 17:20:20
【问题描述】：

我正在关注这个关于 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;

volumes/index.js

import state from './state';
import actions from './actions';

export const VOLUMES_MODULE = 'volumes'

export default {
    namespaced: true,
    actions,
    state,
}

export * from './state'

volumes/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,
      })
    },
}

volumes/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
    },
}

volumes/state.js

export const VOLUMES = 'data'
export const PAGINATION = 'pagination'

export default {
    [VOLUMES]: [],
    [PAGINATION]: {
        page: 1,
        limit: 20,
        totalPages: 1,
    },
}

【问题讨论】：

标签： javascript vuex

【解决方案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

【讨论】：