Vuex 모듈 구조

Vuex 모듈 구조

튜토리얼과 예제를 통해 검색해 봤지만 관련된 내용은 찾을 수 없었습니다.구조화하는 것은 개발자의 몫이라는 것은 알지만, 어떻게 하면 다음 사항에 대한 최선의 접근법이 될 수 있을까 고민하고 있었습니다.

다음과 같은 모듈을 갖춘 매장이 있습니다.

- root/
--- app-store.js
--- modules/
----- tasks.js
----- another-module.js

기타 등등.

모듈이나 네임스페이스 같은 건 다 알 것 같아요그러나 이 상황에 어떻게 대처해야 할지 잘 모르겠습니다(예).

1 - 작업 목록에 액세스합니다.2 - 목록 내의 작업을 클릭하면 모든 세부 정보가 포함된 보기가 표시됩니다.3 - 이 작업의 일부 변경(업데이트, 삭제 등)

내가 지금 하고 있는 일:

• 'filename.filename'이라는 이름의 단일 파일

• 이미 중첩된 각 작업의 정보를 사용하여 모든 작업을 로드합니다.

• 클릭하면 'currentTaskId' 변수가 설정됩니다.업데이트/삭제 시 모든 작업이 이 변수를 참조합니다.

• ID를 키로 태스크리스트를 로드하고 있기 때문에 매번 검색하지 않고 태스크별로 쉽게 참조할 수 있습니다.

의문점:

• 이 구조 괜찮아요?아니면 하나의 오브젝트를 처리하기 위해 모듈을 작성해야 합니까?

• ID를 어레이의 키로 사용하는 것이 정말 좋은 방법일까요?

• 기타 입력.Vuex는 구조에 대해 상당히 유연하다는 것을 알지만, 저는 멋진 구조를 생각해내려고 노력하지만, 더 단순해야 할 것을 지나치게 생각하는 것이 두려워요.

구조는 항상 개발자의 선택입니다.혼란스럽다면 다음을 참조할 수 있습니다.Vuex 응용 프로그램 구조

응용 프로그램 구조

Vuex는 코드 구성 방법을 제한하지 않습니다.대신, 다음과 같은 일련의 높은 수준의 원칙을 적용합니다.

1. 애플리케이션 레벨의 상태는 스토어에 집중됩니다.

2. 상태를 변이시키는 유일한 방법은 동기 트랜잭션인 돌연변이를 커밋하는 것입니다.

3. 비동기 로직은 에 캡슐화해야 하며 액션으로 구성할 수 있습니다.

이러한 규칙을 따르는 한 프로젝트를 어떻게 구성하는지는 사용자에게 달려 있습니다.저장소 파일이 너무 크면 작업, 돌연변이 및 getter를 별도의 파일로 분할하기만 하면 됩니다.

중요하지 않은 앱의 경우 모듈을 활용해야 합니다.프로젝트 구조의 예를 다음에 나타냅니다.

├── index.html
├── main.js
├── api
│   └── ... # abstractions for making API requests
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # where we assemble modules and export the store
    ├── actions.js        # root actions
    ├── mutations.js      # root mutations
    └── modules
        ├── cart.js       # cart module
        └── products.js   # products module

참고로 쇼핑 카트의 예를 확인해 주세요.

언급URL : https://stackoverflow.com/questions/45296142/vuex-modules-structure