매장을 소중히 여긴다면 꼭 알아야 할 Vuex 기능

Wojciech Bak

프론트엔드 애플리케이션, 특히 복잡한 애플리케이션은 많은 양의 데이터를 처리해야 합니다. 프로그래머는 프로젝트를 가독성 있고 유지 관리하기 쉽게 만들기 위해 다양한 디자인 패턴을 도입합니다. MVC를 다루는 대부분의 일반적인 시나리오에서는 데이터를 앱의 시각적 부분과 분리하고자 합니다.

그렇기 때문에 store 가 매우 유용해졌습니다. React + Redux를 사용할지 아니면 Vue + Vuex - 주요 목표는 동일합니다. 데이터의 구조화, 접근성, 안전성을 동시에 유지합니다..

이 글에서는 Vuex 스토어를 깨끗하고 효율적으로 유지하는 방법에 대한 몇 가지 예를 보여드리려고 합니다.

시작하기 전에 가정해 보겠습니다:

현대식 JavaScript,
기본적으로 Vue가 무엇이고 어떻게 사용하는지 알고 있습니다. 소품, 계산됩니다, 등..,
Vuex에 익숙합니다(작업, 돌연변이, 등) 앱을 더 나은 앱으로 만들고 싶어합니다.

Vuex대부분의 핵심 Vue 프로젝트는 꽤 잘 문서화되어 있으며 공식 문서에서 유용한 해킹 방법을 많이 찾을 수 있습니다. 여러분을 위해 몇 가지 필수 정보를 발췌했습니다.

기본 Vuex 스토어 구현은 다음과 같습니다:

// main.js

'vue'에서 Vue 가져오기
'vuex'에서 Vuex를 임포트합니다.
'./App'에서 App을 가져옵니다;

Vue.use(Vuex)

const store = new Vuex.Store((
  state: (
    data: null;
  ),
  actions: (
      someAction: (( commit ), data) (
          commit("SOME_MUTATION", data);
      )
  ),
  mutations: (
    SOME_MUTATION (state, data) (
        state.data = data;
    )
  ))
));

new Vue((
  el: "#app",
  렌더링: h => h(App),
  store
));

일반적으로 앱이 커지면 라우팅, 일부 글로벌 지시어, 플러그인 등을 적용해야 합니다. 이렇게 하면 main.js 파일은 훨씬 길고 읽기 어렵습니다. 여기와 같이 저장소를 외부 파일에 보관하는 것이 좋습니다:

// store.js
'vue'에서 Vue 가져오기
'vuex'에서 Vuex를 임포트합니다.

Vue.use(Vuex);

const state = (
    데이터: null;
);

const actions = (
    someAction: (( commit ), data) (
        commit("SOME_MUTATION", data);
    )
);

const mutations = (
    SOME_MUTATION (state, data) (
        state.data = 데이터;
    )
);

export default new Vuex.Store((
    state,
    actions,
    mutations
));

1. 모듈

다음과 같은 경우 어떻게 해야 하나요? store.js 파일이 엄청나게 커져서 작업하기 어렵다고 생각하시나요? 사실, 정말 멋진 Vuex 기능이 있습니다. 모듈. 데이터를 별도의 파일로 분할하는 데 사용됩니다.

예를 들어 데이터 도메인이 거의 없는 기업용 앱에서 작업한다고 가정해 보세요:

사용자(모든 권한 및 권한 관리)로 설정합니다,
경로 매개변수(API에 요청하기 전에 전역 매개변수 관리),
매출(월별/분기별/연간 컨텍스트에 표시되는 SalesMegaChart 구성 요소의 경우),
주문(SalesMegaChart 막대를 클릭한 후 표시됨).

...그리고 몇 가지 더 있습니다. 이제 스토어에 모듈화를 도입해야 할 중요한 이유가 생겼습니다.

우선 store.js 파일을 새로 만든 store/ 디렉터리로 이동하여 이름을 변경합니다. index.js. 선택적으로 모든 것을 모듈로 묶어두려면 다음을 제거합니다. 상태, 작업 그리고 돌연변이 를 기본 파일에서 삭제합니다.

// store/index.js

'vue'에서 Vue 가져오기
'vuex'에서 Vuex 가져오기

Vue.use(Vuex);

export default new Vuex.Store((
    modules: (
        // 모듈은 여기로 이동합니다.
    )
));

그런 다음 `store/index.js` 파일 옆에 첫 번째 모듈인 `store/user.js`를 생성합니다.

'../services/api.service'에서 ApiService를 가져옵니다;

const state = (
    loggedIn: false,
    loginError: null,
    user: null
);

const actions = (
    login: async (( commit ), data) (
        try (
            const response = await ApiService.post('/login', data);
            const ( user ) = response.data;

            COMMIT("SAVE_USER", user);
            COMMIT("LOGIN_SUCCESS");
        ) catch (error) (
            COMMIT("LOGIN_ERROR", error);
        )
    )
);

const mutations = (
    SAVE_USER (state, user) (
        state.user = user;
    ),

    LOGIN_SUCCESS (state) (
        state.loggedIn = true;
    ),

    LOGIN_ERROR (state, error) (
        state.loginError = error;
        state.loggedIn = false;
    )
);

export const user (
    state,
    actions,
    mutations
)

이제 준비된 모듈을 기본 `store/index.js` 파일에 로드합니다:

'vue'에서 Vue를 가져옵니다.
'vuex'에서 Vuex를 가져옵니다.
'./user'에서 (사용자)를 가져옵니다;

Vue.use(Vuex);

export default new Vuex.Store((
    모듈: (
        user
    )
));

축하합니다! 이제 정말 멋진 스토어 구현이 완료되었습니다. 컴포넌트에서 데이터에 액세스할 수도 있습니다(예 UserProfile.vue)와 같은 식으로요:

<template>
    <div class="user-profile">
        <h2>(( user.name ))!</h2>
        <!-- component template goes here -->
    </div>
</template>

<script> import ( mapActions ) from 'Vuex';

    export default (
        name: 'UserProfile',

        computed: mapState((
            user: state => state.user
            // user: 'user' <-- alternative syntax
        ))
    )
</script>

2. 네임스페이스

이제 모듈 사용법을 알았으니 Vuex의 다음과 같은 기능에도 익숙해져야 합니다. 네임스페이스. 이전 단계에서는 store/user.js 파일과 함께 사용자 모듈.

에 정의된 데이터 구조는 user.js 파일은 컴포넌트에서 액세스할 수 있지만 사용자 데이터는 전 세계로 바로 전달됩니다. 상태 컨텍스트를 설정합니다:

computed: mapState((
    user: state => state.user
    // user: 'user' <-- 다른 방법
))

모듈을 더 많이 정의하면 어떤 객체가 어떤 모듈에서 왔는지 헷갈릴 수 있습니다. 그렇다면 네임스페이스 모듈을 사용하고 이런 식으로 정의해야 합니다:

export const user (
    네임스페이스: true, // <-- 네임스페이스!
    state,
    actions,
    mutations
)

이제부터 모든 사용자 데이터 (상태 변수의 store/user.js 파일)은 state.user 참조:

computed: mapState((
    user: state => state.user.user
    // user: 'user/user' <-- 다른 방법
))

몇 단계를 더 거치면 컴포넌트에 대해 다음과 같은 결과를 얻을 수 있습니다:

'Vuex'에서 ( mapActions )를 가져옵니다;

기본값 내보내기 (
    이름: '대시보드'),

    computed: mapState((
        sales: 'sales/data',
        orders: 'orders/data',
        sortBy: 'orders/sortBy',
        loggedIn: 'user/loggedIn'
    )),

    methods: mapActions((
        로그아웃 'user/logout',
        loadSales: 'sales/load',
        loadOrders: 'orders/load'
    )),

    created() (
        if (this.loggedIn) (
            loadSales();
            loadOrders();
        )
    )
)

브라보! 너무 신선하고 깔끔하네요... 하지만 걱정하지 마세요. 리팩터링은 끝이 없으니까요. 다음 단계로 넘어갈 준비가 되셨나요?

3. 모듈 간 통신

첫 번째 단계에서는 사용자 모듈:

const actions = (
    로그인: 비동기 (( commit ), 데이터) (
        try (
            const response = await ApiService.post('/login', data);
            const ( user ) = response.data;

            COMMIT("SAVE_USER", user);
            COMMIT("LOGIN_SUCCESS");
        ) catch (error) (
            COMMIT("LOGIN_ERROR", error);
        )
    )
);

실패 시 스토어에 로그인 오류를 추가합니다 - 다음 단계는 무엇인가요?

여기에는 몇 가지 옵션이 있으며 어떤 옵션이 귀하의 필요에 더 적합한지에 따라 선택이 달라집니다. 가장 간단한 방법은 v-if 지시어를 사용하면 스토어에 오류가 있는 경우 오류 메시지를 표시할 수 있습니다.

<template>
    <div class="dashboard">
        <!-- dashboard component template -->
        <div
            v-if="error"
            class="error-message"
        > (( error.message )) </div>
    </div>
</template>
<script> import ( mapActions ) from 'Vuex';

export default (
    name: 'Dashboard',

    computed: mapState((
        error: "user/loginError"
    ))
)
</script>

다시 말하지만, 많은 모듈이 있고 각 모듈이 다음과 같다고 가정해 보겠습니다. 시도/잡기 구문을 사용하면 스토어에 새로운 오류가 생성됩니다. 당연히 이런 식으로 DRY 규칙을 남용하게 될 것입니다.

오류 처리 프로세스를 보다 일반화하려면 어떻게 해야 할까요?

정의해 보겠습니다. 공통 모듈을 만들고 거기에 전 세계적으로 사용되는 로직을 넣습니다.

// store/common.js

const state = (
    errors: []
);

const actions = (
    error: (
        root: true,
        핸들러(( commit ), error) (
            commit("ERROR", error);
        )
    )
),

const mutations = (
    ERROR (state, error) (
        /* 이렇게 하면 최신 오류가 목록 맨 위에 표시됩니다 */.
        state.errors = [error, ...state.errors];
    ))
);

export const common (
    이름 공간: true,
    state,
    mutations
)

이제 사용자 모듈(및 다른 모듈도 마찬가지입니다):

try (
    // 일부 액션
)catch (error) (
    commit("common/ERROR", error, ( root: true ));
)

또는 더 우아한 방법으로 전역 액션을 사용할 수 있습니다:

try (
    // 일부 액션
) catch (error) (
    dispatch("error", error);
)

이 구문은 commit 그리고 dispatch 호출은 설명이 필요 없을 것 같지만, 이러한 트릭에 대한 자세한 내용은 다음에서 확인할 수 있습니다. 여기.

모든 오류를 한곳에 모아두면 쉽게 대시보드 컴포넌트입니다:

computed: mapState((
    errors: 'common/errors'
)),

watch: (
    /* 이것은 저장소에 새로운 오류를 하나씩만 추가하는 각 "common/ERROR" 변이 후에 호출됩니다 */.
    errors() (
        this.showErrorMessage(this.errors[0]);
    )
)

이전 예제에서 공통 모듈이 오류를 처리하는 것은 이미 효율적인 솔루션이지만 더 나아갈 수 있습니다.

보시다시피, 저희는 다음과 같은 변화를 주시하고 있습니다. 일반/오류 배열을 사용할 수 있습니다. 이러한 경우 특정 변이에 대한 작업을 결정해야 할 때 다음을 사용할 수 있습니다. Vuex 플러그인 또는 상위 주문 컴포넌트(HOC).

다음 글에서는 플러그인과 HOC에 대해 설명하겠습니다. 그동안 이 글을 읽어주셔서 감사드리며, 저희가 준비한 예시가 도움이 되셨기를 바랍니다.

계속 지켜봐 주시고 코딩을 계속하세요!

자세히 읽어보세요:

– Vue.js 앱을 개선하는 방법은? 몇 가지 실용적인 팁

– GraphQL: 프로덕션에서 배운 교훈

– Shopify, 스프레 또는 솔리더스? Ruby on Rails가 이커머스 개발에 도움이 되는 이유를 확인하세요.

매장을 소중히 여긴다면 꼭 알아야 할 Vuex 기능

1. 모듈

2. 네임스페이스

3. 모듈 간 통신

관련 문서

미래 지향적인 웹 앱 구축: The Codest의 전문가 팀이 제공하는 인사이트

라트비아에 본사를 둔 10대 소프트웨어 개발 기업

Java 소프트웨어 개발 필수 사항: 성공적인 아웃소싱을 위한 가이드

폴란드 아웃소싱을 위한 최고의 가이드

IT 감사 도구 및 기술에 대한 완벽한 가이드