Vuex

GitLab에서 Vuex 스토어를 구성하는 파일 구조, 상태 관리 패턴, 액션·뮤테이션·게터 작성 방법 및 테스트 방법을 설명합니다.

사용 중단(DEPRECATED) # Vuex 는 GitLab에서 사용 중단(deprecated)되었으며 새로운 Vuex 스토어를 생성해서는 안 됩니다. 기존 Vuex 스토어는 계속 유지 관리할 수 있지만, Vuex를 완전히 마이그레이션 하는 것을 강력히 권장합니다. 이 페이지에 포함된 나머지 정보는 공식 Vuex 문서 에서 더 자세히 설명하고 있습니다. 관심사 분리 # Vuex는 State, Getters, Mutations, Actions, Modules로 구성됩니다. 사용자가 액션을 선택하면 해당 액션을 dispatch 해야 합니다. 이 액션은 상태를 변경하는 뮤테이션을 commit 합니다. 액션 자체는 상태를 업데이트하지 않으며, 오직 뮤테이션만 상태를 업데이트해야 합니다. 파일 구조 # GitLab에서 Vuex를 사용할 때는 가독성을 높이기 위해 다음과 같이 관심사를 별도 파일로 분리하세요: └── store ├── index.js # 모듈을 조합하고 스토어를 내보내는 파일 ├── actions.js # 액션 ├── mutations.js # 뮤테이션 ├── getters.js # 게터 ├── state.js # 상태 └── mutation_types.js # 뮤테이션 타입 아래 예시는 사용자를 나열하고 상태에 추가하는 애플리케이션을 보여줍니다. (더 복잡한 구현 예시는 이 리포지터리 에 저장된 보안 애플리케이션을 참고하세요.) index.js # 스토어의 진입점입니다. 다음을 가이드로 활용할 수 있습니다: // eslint-disable-next-line no-restricted-imports import Vuex from 'vuex'; import * as actions from './actions'; import * as getters from './getters'; import mutations from './mutations'; import state from './state'; export const createStore = () => new Vuex.Store({ actions, getters, mutations, state, }); state.js # 코드를 작성하기 전에 가장 먼저 해야 할 일은 상태를 설계하는 것입니다. 종종 HAML에서 Vue 애플리케이션으로 데이터를 전달해야 합니다. 더 쉽게 접근하기 위해 상태에 저장합니다. export default () => ({ endpoint: null, isLoading: false, error: null, isAddingUser: false, errorAddingUser: false, users: [], }); 상태 속성 접근 # 컴포넌트에서 상태 속성에 접근하려면 mapState 를 사용할 수 있습니다. actions.js # 액션은 애플리케이션에서 스토어로 데이터를 전송하는 정보 페이로드입니다. 액션은 일반적으로 type 과 payload 로 구성되며 발생한 일을 설명합니다. 뮤테이션 과 달리, 액션은 비동기 작업을 포함할 수 있으므로 항상 액션에서 비동기 로직