대규모 웹 사이트의 Vuex 스토어 아키텍처

대규모 웹 사이트의 Vuex 스토어 아키텍처

현재 Vue.js를 사용하여 대규모 웹사이트를 구축하고 있으며 Vuex 스토어 아키텍처에 갇혀 있습니다.

폴더 구조는 다음과 같습니다.

.
├── build
├── src
│   └── components
│       ├── Header.vue
│       └── TimeStamp.vue
│       └── Photo.vue
│   └── pages
│       ├── index.vue
│       └── about.vue (includes Header.vue, Thumbnail.vue)
├── store
│   └── index.js
│   └── modules
│       ├── Header.js
│       └── TimeStamp.js
│       └── Photo.js

기본적으로 코드 패턴은 각 컴포넌트에 대응하는 모듈스토어가 있는데 모든 모듈 상태를 큰 단일 오브젝트로 Import해야 하는 것 같습니다.그것은 혼란스러운 점입니다.페이지 내에서도 TimeStamp 컴포넌트가 필요없기 때문에 TimeStamp 스테이트가 범위 내에 존재하며 총 수백 개의 스테이트가 존재한다고 가정해 보겠습니다.필요한 건Header.js그래서 다른 것들은 다 쓸모없는 것들이에요.

그래서 제 질문은 다음과 같습니다.

각 페이지에 대해 동적 상태 개체를 만들 수 있습니까?예를 들어 정보 페이지에서 가져오기만 합니다.Header.js그리고.Photo.js인덱스 페이지에서 Import만 수행합니다.Header.js그리고.TimeStamp.js구조는 다음과 같습니다.

├── store
│   └── pages
│       ├── Index.js
│       └── About.js
│       └── News.js
│
│   └── modules
│       ├── Header.js
│       └── TimeStamp.js
│       └── Photo.js

단일 상태 개체

모든 모듈 상태를 큰 단일 개체로 Import해야 할 것 같습니다.

모든 것이 하나의 개체로 관리됩니다.하지만 물론 당신은 필요에 따라 조각을 반환할 수 있는 게터에 대해 알고 있습니까?

또한 스토어 모듈을 통합하는 것은 매우 간단합니다.

export const store = new Vuex.Store({
  modules: {
    config,
    user,
    pages,
    ...
  },
  plugins: [addTagToType_StorePlugin]
})

하나의 객체를 갖는다는 것은 다음과 같은 교차 코드를 추가할 수 있다는 것입니다.addTagToType_StorePlugin(이것은 개발자 툴의 표시를 향상시키기 위한 것입니다).

동적 상태

각 페이지에 대해 동적 상태 개체를 생성할 수 있습니까?

그렇고 말고요.

국가를 어떻게 구성할지에 대한 규칙은 없습니다.플럭스 패턴은 상태를 업데이트하고 액세스하는 방법에 대한 규칙만 제공합니다.

용도에 가장 적합한 구조를 사용해야 합니다.

위에서 볼 수 있는 것처럼, 저는 VIP를 사용합니다.pages스테이트 모듈동적 측면에 대한 아이디어를 제공하기 위해 초기 구조를 소개합니다.

const state = {
  files: {
    validations: [],
    referentials: [],
    clinics: []
  },
}

그래서, 각각의 자산은files다른 페이지용입니다.사용자가 '검증' 페이지를 방문하지 않으면 상태가 로드되지 않습니다.

동적 상태에 액세스하는 방법

getter는 상태 조각을 '동적으로' 선택하는 데 사용되는 매개 변수를 사용하는 함수를 반환할 수 있습니다(참조: Vuex Getters).

const getters = {
  pageFiles: state => {
    return page => {
      return state.files[page]
    }
  },

computed: {
  pageFiles() {
    return this.$store.getters.pageFiles(this.page)
  },

Devtools 및 동적 상태

위에서 언급한 플러그인은 동적 데이터 변환 시 Chrome devtools 디스플레이를 향상시키는 데 사용됩니다.vue-devtools 참조

const addTagToType_StorePlugin = store => {
  store.subscribe((mutation, state) => {
    if (mutation.payload.tag) {
      mutation.type = `${mutation.type} / ${mutation.payload.tag}` 
    }
  })
}

은 「」일 이 있습니다.SET_FILES떤떤페 ?이 ?? ????
타입을 이 됩니다(예: .tag

SET_FILES

로.

SET_FILES / validations

vuex 스토어의 개념은 모든 데이터가 포함된 단일 개체를 갖는 것입니다.가게의 일부만 고르는 것은 의도한 디자인에 반한다.페이지 내에서만 유지되는 데이터가 있는 경우 전역 범위를 사용하는 대신 데이터 자체를 관리할 수 있습니다.

TL;DR;

아니요.

음, 사실 이론적으로는 컴포넌트를 로드할 때 데이터를 로드하고 필요하지 않을 때 언로드할 수 있습니다.그런 다음 이를 자동화할 수 있지만, 플럭스 패턴의 요점은 그게 아닙니다.

언급URL : https://stackoverflow.com/questions/47465967/vuex-store-architecture-in-large-scale-website