Vuex 애플리케이션 구조

1 개요

Vuex Application Structure

Vuex 애플리케이션 구조

• Vuex에서는 코드 구조를 제한하지는 않는다. 그보다는 다음의 상위 규칙들을 지켜야 한다.
• 1. 애플리케이션-수준의 상태(state)는 저장소에 중앙집중되어 있다.
• 2. 상태를 변이시키는 유일한 방법은 동기적 트랜잭션인 변이를 커밋하는 것이다.
• 3. 비동기식 로직은 캡슐화되어야 하며, 액션들로 구성될 수 있다.

• 이 규칙들을 따랐다면, 프로젝트를 어떻게 구조화할지는 사용자에게 달려 있다.
• 저장소(store) 파일이 너무 커졌을 때는 액션, 변이, 게터를 개별 파일로 분할하면 된다.
• 중요한 앱의 경우, 모듈을 활용해야 할 필요가 있다.
• 다음은 프로젝트 구조의 예시이다.

├── index.html
├── main.js
├── api
│   └── ... # API 요청을 위한 추상화를 포함한다.
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 모듈을 조합하고 저장소를 내보내는 곳이다.
    ├── actions.js        # 루트 액션
    ├── mutations.js      # 루트 변이
    └── modules
        ├── cart.js       # cart 모듈
        └── products.js   # products 모듈

• 쇼핑카트 예시를 참고해도 좋다.

2 같이 보기

• Vuex 모듈
• Vuex 플러그인

3 참고

• https://vuex.vuejs.org/guide/structure.html
• https://vuex.vuejs.org/kr/guide/structure.html