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("让我们开始吧")

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

Answer 1

首先检查您是否已将商店安装到您的视图中，通常在您 new 一个 Vue 实例的 main.js 中，代码应该是这样的：

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

VueX 模块不触发动作

VueX module not triggering actions

javascript

vuex