vue + vuex를 사용한 개발 중에 모의 데이터 사용

vue + vuex를 사용한 개발 중에 모의 데이터 사용

Vue 앱도 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);
  }
};

유지보수가 쉽고 번들 사이즈를 늘리지 않을 수 있습니다.

액션 오브젝트 전체를 비웃는 것도 괜찮을 것 같았는데, 그 시점에서 어떻게 하면 모조 파일을 번들로 묶지 않게 할 수 있을까요?

이러한 문제를 피하기 위해 프런트 엔드 환경을 어떻게 관리합니까?

API 전체를 다른 클래스/오브젝트에 캡슐화한 것입니다.그런 다음 단일 진입 지점이 mock api와 real 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 부분을 제거할 수 있습니다.

언급URL : https://stackoverflow.com/questions/56289549/using-mock-data-while-on-development-with-vue-vuex