Vue.js

Question

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

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

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() 挂钩中，我有一个辅助函数可以一次性注册所有应用程序模块。我这样做是将模块存储导入帮助程序文件，然后注册它们。这是我的帮助文件：

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 函数），returns 一个 401。我已经通过注释掉 [=76 的各个部分来确认这一点=] - 这绝对是导入而不是函数本身。

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

即使应该触发这些 API 调用的操作仅在每个模块的顶级组件中调度，但每次我重新加载时都会尝试 API 调用登录页面，甚至在创建这些组件之前；
Vue-dev-tools 没有为正在调度的动作注册相应的事件；
如果我从帮助程序文件中删除所有商店导入，则不会发生 API 调用。

我已经尝试更改我在 vue-router 中导入的格式，以便延迟加载组件，因为我认为这可能是问题所在。捆绑包的大小减小了，但它没有修复幻影 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');
}

Vue.js - Vuex：当我将我的模块存储导入辅助文件时，为什么会调度一个动作？

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

javascript

vuex

vue-router

vuex-modules