Question

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

所有设置广告都能按预期正常运行，但我想对其进行改进，以便无需实际调用API端点即可进行处理（主要是为了避免速率限制）。

我创建了一个模拟文件夹，并在其中放置了一些文件。如何在开发中使用那些模拟程序以及生产环境上的真正api端点，而又不会在我的代码中造成混乱？

我创建的repo越少越好。它包括vue + vuex，一个负责从商店中读取内容的智能组件，以及一个愚蠢的组件可以显示它。

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

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之间切换：

// 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这样的构建器可以优化构建并删除生产构建based on the environment中的整个模拟api部分。

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

1 个答案: