时间戳

首页 > 解决方案 > 在使用 vue + vuex 进行开发时使用模拟数据

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

问题描述

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

一切都按预期正常工作，但我想改进它，以便我可以在不实际调用 API 端点的情况下工作（主要是为了避免速率限制）。

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

我创建了一个尽可能少的回购。它包括 vue + vuex，一个负责从 store 读取的智能组件，以及一个显示它的哑组件。

用糟糕的话来说，我正在寻找一种方法来改变这一点：

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);
  }
};

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

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

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

标签： vue.jsmockingvuex

解决方案

我所做的是将整个 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 这样的构建器可以根据环境优化构建并在生产构建中移除整个 mock api 部分。

推荐阅读