javascript - Vue.js-Vuex : why is an action dispatched when I import my module stores to a helper file?

Question

我已经在 Vue 中构建了一个应用程序。它由许多独立的模块组成，每个模块对应一个路由，并有一个顶级组件(以及许多子组件/子组件)。每个模块都有自己的存储、操作、突变和 getter ，以及在组件的 created() Hook 中调度的 API 调用以获取必要的数据。

这是我的应用程序的结构:

Candidates.vue

created() {
    this.$store.dispatch('$_candidates/getAllCandidates');
  },

/modules/candidates/_store/actions.js

import api from '../_api';

const getAllCandidates = (context) => {
  api.fetchAllCandidates
    .then((response) => {
      context.commit('ALL_CANDIDATES_FETCHED', response.data.candidate_list);
    })
    .catch((error) => {
      // eslint-disable-next-line
      console.error(error);
    });
};

/modules/candidates/_api/index.js

import { fetchData } from '@/helpers';

const allCandidatesEndpoint =
  'https://myapiendpoint.io/candidates/list/all';
const fetchAllCandidates = fetchData(allCandidatesEndpoint, 'get');

export default {
  fetchAllCandidates,
};

在 App.vue 的 beforeCreate() 钩子(Hook)中，我有一个辅助函数来一次性注册所有应用程序模块。我这样做是将模块存储导入帮助程序文件，然后注册它们。这是我的帮助文件:

helpers.js

import axios from 'axios';
import { store } from '@/store/store';

import candidatesStore from './modules/candidates/_store';
import dashboardStore from './modules/dashboard/_store';
import eventsStore from './modules/events/_store';
import loginStore from './modules/login/_store';

function fetchData(endpoint, requestType, requestBody) {
  const apiToken = store.state.apiToken;
  delete axios.defaults.auth;
  return axios.request({
    method: requestType,
    data: requestBody,
    url: endpoint,
    headers: {
      'server-token-id': apiToken,
    },
  })
    .then(response => response)
    .catch(error => error);
}

/* Register all of the Vuex modules we'll need to manage application state */

function registerVuexModules() {
  store.registerModule('$_candidates', candidatesStore);
  store.registerModule('$_dashboard', dashboardStore);
  store.registerModule('$_events', eventsStore);
  store.registerModule('$_login', loginStore);
}

function unregisterVuexModules() {
  store.unregisterModule('$_candidates', candidatesStore);
  store.unregisterModule('$_dashboard', dashboardStore);
  store.unregisterModule('$_events', eventsStore);
  store.unregisterModule('$_login', loginStore);
}

export {
  fetchData,
  registerVuexModules,
  unregisterVuexModules,
};

...然后我像这样导入到 App.vue 中:

beforeCreate() {
  registerVuexModules();
},

但是，每个模块的导入都会以某种方式触发 API 调用(使用 fetchData 函数)，它会返回 401。我已经通过注释掉 helpers.js 的各个部分来确认这一点——这绝对是导入而不是自己发挥作用。

当我删除将模块存储导入到 helpers.js 中时，不会尝试对该模块的顶级组件进行 API 调用。对我来说奇怪的部分是:

1. 即使应该触发这些 API 调用的操作仅在每个模块的顶级组件中调度，但每次我重新加载登录页面时都会尝试 API 调用，甚至在创建这些组件之前；

2. Vue-dev-tools 没有为正在调度的 Action 注册相应的事件；

3. 如果我从帮助程序文件中删除所有商店导入，则不会发生任何 API 调用。

我已经尝试更改我在 vue-router 中导入的格式，以便延迟加载组件，因为我认为这可能是问题所在。 bundle 的大小减小了，但它没有修复幻影 API 调用。这就是我导入它们的方式...

/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import axios from 'axios';

import { store } from '../store/store';

/* Lazy load all of the components required for the routes */

const Login = () => import(/* webpackChunkName: "login" */
  '@/modules/login/Login');

const Dashboard = () => import(/* webpackChunkName: "dashboard" */
  '@/modules/dashboard/Dashboard');

...

const router = new Router({

  routes: [
    {
      path: '/',
      name: 'root',
      component: Login,
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        guard(to, from, next);
      },
    },
...

任何人都可以解释这种行为或我错过了什么吗？

Answer 1

据我所知，你有这条线

const fetchAllCandidates = fetchData(allCandidatesEndpoint, 'get');

这意味着每次您 import 时，它都会运行 fetchData 函数并返回结果。

也许你打算改为这样做。

const fetchAllCandidates = function ()
{
  return fetchData(allCandidatesEndpoint, 'get');
}