Vuex

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

사용 중단(DEPRECATED) # Vuex 는 GitLab에서 사용 중단되었으며, 새 Vuex 스토어를 만들어서는 안 됩니다. 기존 Vuex 스토어는 계속 유지 관리할 수 있지만, Vuex에서 완전히 마이그레이션 하는 것을 강력히 권장합니다. 이 페이지에 담긴 나머지 정보는 공식 Vuex 문서 에서 더 자세히 설명합니다. 관심사 분리 # Vuex는 State, Getters, Mutations, Actions, Modules로 구성됩니다. 사용자가 액션을 선택하면 그 액션을 dispatch 해야 합니다. 이 액션은 상태를 변경하는 뮤테이션을 commit 합니다. 액션 자체는 상태를 업데이트하지 않습니다. 뮤테이션만 상태를 업데이트해야 합니다. 파일 구조 # GitLab에서 Vuex를 사용할 때는 가독성을 높이기 위해 이러한 관심사를 서로 다른 파일로 분리합니다. └── store ├── index.js # where we assemble modules and export the store ├── actions.js # actions ├── mutations.js # mutations ├── getters.js # getters ├── state.js # state └── mutation_types.js # mutation types 다음 예시는 사용자를 나열하고 상태에 추가하는 애플리케이션을 보여줍니다. (더 복잡한 구현 예시는 이 리포지터리 에 저장된 보안 애플리케이션을 살펴봅니다.) 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 : [], }); state 속성 접근 # 컴포넌트에서 상태 속성에 접근하려면 mapState 를 사용할 수 있습니다. actions.js # 액션은 애플리케이션에서 스토어로 데이터를 보내는 정보 페이로드입니다. 액션은 보통 type 과 payload 로 구성되며 무슨 일이