대규모 SPA에서 우수한 VueX 스토어 디자인을 사용하는 방법

대규모 SPA에서 우수한 VueX 스토어 디자인을 사용하는 방법

저는 VueJ에 대해 잘 알고 있으며 VueX 사용에 대해서도 잘 알고 있습니다.저는 VueJs 프로젝트를 몇 개 진행하고 있습니다만, 점포 설립에 어려움을 겪고 있습니다.

몇 가지 질문이 있습니다.

• 모듈을 분할하려면 어떻게 해야 하나요?웹 어플리케이션의 자원(프로젝트, 기사 등) 단위 또는 '페이지/컨테이너' 단위?
• 저장소의 내용(및 지속성)은 무엇입니까?UI 상태, 데이터 또는 둘 다?
• 모듈, 게터, 액션 및 돌연변이에 적절한 이름을 사용하는 방법

확실히 하기 위해서:Vue와 VueX의 구문과 사용법을 알고 있습니다.질문은 VueX와 그 스토어의 구조/아키텍처에 초점을 맞추고 있습니다.

이 문제를 해결하기 위해 조건이나 좋은 비디오/게시글을 보내주시면 감사하겠습니다!

밥, 잘부탁드립니다.

애플리케이션 스토어를 정리하는 방법에는 여러 가지가 있다고 생각합니다만, 대부분의 경우 다음과 같이 하고 있습니다.

+ store
  - actions.js // global actions (like a for snackbar singleton, loader etc)
  - getters.js // global getters (like a for snackbar singleton, loader etc)
  - index.js // import all other indexes (in the subfolders)
  - mutations.js // global mutations (like a for snackbar singleton, loader etc)
  - state.js // global state (like a for snackbar singleton, loader etc)
  + common
    - actions.js // common actions (shared with all resources)
    - getters.js // common getters (shared with all resources)
    - mutations.js // common mutations (shared with all resources)
    - state.js // common state (shared with all resources)
  + subfolder1 // a resource (like an article, a user, ...)
    - index.js // imports common/* files or siblings overriding it, and exports it
    - actions.js // optional file overriding common/actions.js
    - getters.js // optional file overriding common/getters.js
    - mutations.js // optional file overriding common/mutations.js
    - state.js // optional file overriding common/state.js
  + subfolder2 // an other resource ...
  + ...

에서common폴더에는 '일반' 리소스에 대한 코드 베이스가 있으므로 처리할 각 리소스에 대해 중복되지 않도록 합니다.필요한 경우 필요한 방법을 재정의하는 전용 파일을 통해 특정 리소스에 대해 재정의할 수 있습니다.

다음 예시는 파일을 덮어쓰는 방법을 보여 줍니다.fetchDB의 방법common/actionos.js특정 리소스에 대한 파일:

import { actions as baseActions } from "../common/actions"

const actions = Object.assign({}, baseActions) // we don't want to edit the base instance

// overrides the common method
actions.fetchDb = async function(context, args) {
  args.params.url = "myresource"
  await baseActions.fetchDb.call(this, context, args.params)
}

export default actions

주요 장점은 코드 중복을 줄이고 리소스를 분리하여 필요에 따라 사용자의 동작을 조정할 수 있다는 것입니다.

이 조직이 당신의 요구를 충족시킬 수 있다고 생각하십니까?

언급URL : https://stackoverflow.com/questions/55406998/how-to-use-a-good-vuex-store-design-in-a-large-spa