Vuex Store를 크게 단순화하는 방법

Vue 애플리케이션의 크기가 커짐에 따라 Vuex 스토어의 작업 및 변형 수도 증가합니다. 이것을 더 관리하기 쉬운 것으로 줄이는 방법을 보여 드리겠습니다.

Vuex란 무엇인가

Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리입니다. 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙을 사용하여 응용 프로그램의 모든 구성 요소에 대한 중앙 집중식 저장소 역할을 합니다.

우리가 Vuex를 사용하는 방법

Factory Core Framework 애플리케이션의 모든 애플리케이션 간에 상태를 공유하기 위해 Vuex를 사용하고 있습니다. 프레임워크는 애플리케이션 번들이므로 현재 9개의 Vuex 스토어가 있습니다. 각 저장소에는 고유한 상태, 작업 및 변형이 있습니다. 백엔드에 대한 API 호출을 수행하기 위해 스토어에서 작업을 사용하고 있습니다. 데이터가 반환되면 변형을 사용하여 데이터를 상태에 저장합니다. 이렇게 하면 모든 구성 요소가 해당 데이터에 액세스할 수 있습니다. 상상할 수 있듯이 매장에는 이러한 API 호출을 처리하기 위해 매우 많은 작업이 있을 수 있습니다. 다음은 Vuex 스토어 중 하나에서 수행되는 모든 작업의 ​​예입니다.

이 상점에는 16개의 조치가 있습니다. 이제 9개의 상점이 있는 경우 Factory Core Framework에 총 몇 개의 작업이 있는지 상상해 보십시오!

우리의 행동을 단순화

모든 작업은 기본적으로 동일한 기능을 수행합니다. 모든 작업은 다음을 수행합니다.

API에서 데이터 가져오기(필요한 경우 페이로드 포함)

(선택 사항) 데이터를 상태로 저장

작업을 호출한 구성 요소에 대한 응답 반환

이를 단일 작업으로 리팩터링하기 위해 작업이 다음을 알아야 하는지 여부를 알아야 했습니다.

적중할 엔드포인트

API 호출에서 페이로드를 보낼지 여부

데이터를 상태에 커밋할지 여부, 그렇다면 어떤 상태 변수에 커밋할지

우리의 현재 행동

다음은 우리 작업 중 하나의 예입니다.

async getLineWorkOrders({ rootState, commit }, payload) {
    try {
        let response = await axios.post(
           'api.factory.com/getLineWorkOrders',
           Object.assign({}, payload.body, { language: rootState.authStore.currentLocale.locale }),
           rootState.config.serviceHeaders
        );
       commit( 'setCurrentWorkOrderNumber', response.data.currentWorkOrderNumber );

       return response.data;
    } catch (error) {
       throw error;
    }
},

이 작업에서는 엔드포인트 'api.factory.com/geteLineWorkOrders'를 눌러 백엔드 API에서 데이터를 가져옵니다. 데이터가 검색된 후 상태 변수 currentWorkOrder가 업데이트됩니다. 마지막으로 데이터는 호출한 구성 요소로 반환됩니다. 우리의 모든 행동은 이 형식을 가집니다. 단일 작업으로 리팩터링하려면 페이로드를 보낼지 여부와 데이터를 커밋할지 여부에 관계없이 엔드포인트가 필요합니다. 리팩터링된 단일 작업은 다음과 같습니다.

async fetchData({ rootState, commit }, payload) {
   try {
       let body = { language: rootState.authStore.currentLocale.locale };
       if (payload) {
           body = Object.assign({}, payload.body, body);
       }
      let response = await axios.post(\`api.factory.com/${payload.url}\`, body, rootState.config.serviceHeaders );
      if (payload.commit) {
          commit('mutate', {
              property: payload.stateProperty,
              with: response.data\[payload.stateProperty\]
           });
      }
      return response.data;
   } catch (error) {
      throw error;
   }
}

이 단일 조치는 가능한 모든 호출을 처리합니다. API 호출로 데이터를 보내야 하는 경우 그렇게 합니다. 데이터를 커밋해야 하는 경우 그렇게 합니다. 데이터를 커밋할 필요가 없으면 그렇지 않습니다. 항상 데이터를 구성 요소로 반환합니다.

하나의 돌연변이 사용

이전에는 상태를 변경해야 하는 모든 작업에 대해 이를 처리하기 위해 새로운 변경을 생성했습니다. 우리는 그것들을 모두 단일 돌연변이로 교체했습니다. 단일 돌연변이는 다음과 같습니다.

const mutations = {
    mutate(state, payload) {
       state\[payload.property\] = payload.with;
    }
};

액션이 데이터를 상태로 저장해야 하는 경우 다음과 같이 이 변이를 호출합니다.

commit('mutate', {
    property: <propertyNameHere>,
    with: <valueGoesHere>
});

결론

우리는 단 하나의 작업과 하나의 변형을 가짐으로써 매장의 작업과 변형을 크게 단순화했습니다.

교육 과정

내 웹 사이트 CodePrep에서 교육 과정을 만듭니다. Vue, Webpack, Flexbox, 함수형 프로그래밍 등에 대한 교육 과정이 있습니다. Check it out here.