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 같이 보기[ | ]

3 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}