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

그렇기 때문에 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가 이커머스 개발에 도움이 되는 이유를 확인하세요.