vue.js - 在使用 vue + vuex 进行开发时使用模拟数据

Question

我正在开发一个也使用 vuex 的 Vue 应用程序。

一切都已按预期正常运行，但我想改进它，以便我可以在不实际调用 API 端点的情况下处理它(主要是为了避免速率限制)。

我创建了一个模拟文件夹并在其中放置了一些文件。我如何设法在开发中使用这些模拟，并在生产构建中使用真正的 api 端点而不弄乱我的代码？

我创建了一个 repo尽可能少。它包括 vue + vuex，一个负责从商店读取的智能组件，一个dumb组件显示它。

简而言之，我正在寻找一种方法来改变这一点:

const actions = {
  async fetchTodos({ commit }) {
    let response;
    if (process.env.NODE_ENV === "development") {
      response = { data: todos };
    } else {
      response = await axios.get("https://jsonplaceholder.typicode.com/todos");
    }
    commit("setTodos", response.data);
  }
};

使用更易于维护且不会增加包大小的东西。

我考虑过模拟整个操作对象，这似乎没问题，但我如何避免在那个时候捆绑我的模拟文件？

您如何管理您的前端环境以避免此类问题？

Answer 1

我所做的是将整个 API 封装在另一个类/对象中。然后，该单一入口点会在模拟 API 和真实 API 之间切换:

// store.js
const api = require('./api');

const actions = {
  async fetchTodos({ commit }) {
    // you can use api.getTodos() instead or another naming convention
    const response = await api.get('todos');
    commit("setTodos", response.data);
  },
};

// api.js
const realapi = require('./realapi');
const mockapi = require('./mockapi');

module.exports = process.env.NODE_ENV === 'production' ? realapi : mockapi;


// mockapi/index.js
const todos = loadTodos();

module.exports = {
  async get(path) {
    switch (path) {
      case 'todos':
        return { data: todos };

      // etc.
    }
  }
};

// realapi/index.js
const root = 'https://jsonplaceholder.typicode.com/';

module.exports = {
  get(path) {
    return axios.get(root + path);
  }
};

像 Webpack 这样的构建器可以优化构建并删除生产构建中的整个模拟 api 部分 based on the environment .