VueJS 컴포넌트 시스템 아키텍처

VueJS 컴포넌트 시스템 아키텍처

내가 달성하려고 하는 것

현재 작업 중인 애플리케이션에 적합한 아키텍처를 찾고 있습니다.

현재 버전의 애플리케이션 스크린샷을 보면 다양한 형식의 데이터 테이블/목록을 볼 수 있습니다.두 번째 스크린샷의 테이블에는 자체 네비게이션이 있습니다.경우에 따라서는 테이블 행을 선택할 수 있습니다.다른 화면에서는 지정된 키워드로 항목 목록을 필터링할 수 있습니다.

프런트 엔드는 VueJs로 재구축됩니다.특정 화면마다 일회성 컴포넌트를 작성하는 것이 아니라 애플리케이션 전체에서 사용할 수 있는 보다 일반적인 솔루션을 원합니다.

필요한 것은 루트에 데이터 세트가 포함되어 있고, 아이들이 그 데이터를 (아마도 여러 개) 표현해 주는 컴포넌트 시스템입니다.루트 컴포넌트에는 주로 사용자 지정 구성, 필터 및 표현 제어에 사용되는 선택 항목도 포함되어 있습니다.

내가 달성하려는 것은 어떤 유사 코드로 가장 잘 설명된다.

문의사항

데이터를 저장하는 가장 좋은 방법은 무엇입니까?하위 구성 요소가 이 데이터에 액세스하는 방법을 선택하십시오.

통과:data-display각 자녀에게 소품으로 데이터를 다운시키는 것은 귀찮아 보입니다.특히 표현은 이 데이터에 대한 암묵적인 접근권을 가지고 있기 때문이다.

Vuex를 사용해야 하나요?여러 인스턴스에서 어떻게 작동합니까?data-display동적 모듈 등록에 대해 읽은 적이 있는데 도움이 될까요?

더 좋은 방법은 없을까?아무쪼록 잘 부탁드립니다!

고객님의 요건에 대한 모든 세부사항을 파악하고 있는지는 모르겠지만 SPA의 여러 '페이지'에 걸쳐 데이터가 공통적인 것은 이해합니다.Vuex를 꼭 추천합니다.

• 모든 페이지에 동일한 데이터
• 컴포넌트 계산 속성을 통한 액세스.이 속성은 스토어 변경에 반응하지만 의존관계 변경이 없는 경우 재계산도 저장하기 위해 캐시됩니다.
• 소품(하향) 및 이벤트(상향)에서 복잡한 데이터 전달을 많이 절약할 수 있습니다.

의사코드를 보면 사이드바에는 3종류의 필터가 있습니다.이 데이터도 저장소에 저장하면 뷰의 계산된 속성이 데이터에 필터를 적용할 수 있습니다.계산 로직은 분리하여 쉽게 테스트할 수 있습니다.

child.vue

<template>
  <div>{{ myChildData.someProperty }}</div>
</template>

<script>
export default {
  props: [...],
  data: function () {
    return {
      selection: 'someValue'  // set this by, e.g, click on template
    }
  },
  computed: {
    myChildData() {
      return this.$store.getters.filteredData(this.selection)
    }
  }
}
</script>

store.displaces를 설정합니다.

const state = {
  myData: {
    ...
  },
  filters: {  // set by dispatch from sidebar component
    keyword: ...,
    toggle: ...,
    range: ...
  },
}

const getters = {
  filteredData: state => {
    return childSelection => {  // this extra layer allows param to be passed
      return state.myData
       .filter(item => item.someProp === state.filters.keyword)
       .filter(item => item.anotherProp === childSelection)
    }
  },
}

const mutations = {
  'SET_DATA' (state, payload) {
    ...
  },
  'SET_FILTER' (state, payload) {
    ...
  }
}

export default {
  state,
  getters,
  mutations,
}

범용 아이

아마 이것과 씨름하는 많은 방법이 있을 것이다.각 아이가 공통 컴포넌트를 사용하는 얇은 컴포넌트인 컴포넌트를 사용한 적이 있습니다만, 슬롯에 넣을 수 있는 특정 데이터나 독자적인 마크업이 있는 경우에만 필요합니다.

child1.vue

<template>
  <page-common :childtype="childType">
    <button class="this-childs-button" slot="buttons"></button>
  </page-common>
</template>

<script>
import PageCommon from './page-common.vue'
export default {
  props: [...],
  data: function () {
    return {
      childType: 'someType'
    }
  },
  components: {
    'page-common': PageCommon,
  }
}
</script>

페이지 공통표시하다

<template>
  ...
  <slot name="buttons"></slot>
</template>

<script>
export default {
  props: [
    'childtype'
  ],
  data: function () {
    return {
      ...
    }
  },
}
</script>

여러 데이터 인스턴스

여러 가지 변형이 있습니다.속성을 가진 오브젝트를 인덱스로 사용했기 때문에 스토어는

store.displaces를 설정합니다.

const state = {
  myData: {
    page1: ...,  // be sure to explicitly name the pages here
    page2: ...,  // otherwise Vuex cannot make them reactive
    page3: ...,
  },
  filters: {  // set by dispatch from sidebar component
    keyword: ...,
    toggle: ...,
    range: ...
  },
}

const getters = {
  filteredData: state => {
    return page, childSelection => {  // this extra layer allows param to be passed
      return state.myData[page]  // sub-select the data required
       .filter(item => item.someProp === state.filters.keyword)
       .filter(item => item.anotherProp === childSelection)
    }
  },
}

const mutations = {
  'SET_DATA' (state, payload) {
    state.myData[payload.page] = payload.myData
  },
  'SET_FILTER' (state, payload) {
    ...
  }
}

export default {
  state,
  getters,
  mutations,
}

언급URL : https://stackoverflow.com/questions/46302459/vuejs-component-system-architecture