유사한 기능 구성요소에 대한 기존 Vue 구조(Vuex 포함)

유사한 기능 구성요소에 대한 기존 Vue 구조(Vuex 포함)

기능성은 비슷하지만 게이터와 동작만 다른 구성 요소에 대한 규약에 대한 질문.

게이터와 조치만 다를 뿐 청결/유지관리하는 방법은?
믹스인을 사용하니?상위 구성 요소?스위치 케이스 사용? 그리고 가능하다면 당신의 선택을 설명하라.

예를 들어 다음과 같은 구성 요소가 있다.

1. 공유 공유sameFunction1()그리고sameFunction2()
2. 유일한 차이점은 게이터와 행동이 다르다는 것이다.

성분 1

export default {
  // ...
  computed: {
    ...mapGetters([
      'getDog1',
      'getCat1',
    ])
  },
  methods: {
    ...mapActions([
      'setDog1',
      'setCat1',
    ])
    sameFunction1() {...},
    sameFunction2() {...},
  },
}

구성 요소 2

export default {
  // ...
  computed: {
    ...mapGetters([
      'getDog2',
      'getCat2',
    ])
  },
  methods: {
    ...mapActions([
      'setDog2',
      'setCat2',
    ]),
    sameFunction1() {...},
    sameFunction2() {...},
  },
}

에스터스 플라스크 코멘트 기준

우리는 혼합물을 사용할 수 있고 추상적인 클래스처럼 구성 요소를 구성할 수 있다.

믹신

// define a mixin object
var myMixin = {
  methods: {
    sameFunction1() {...},
    sameFunction2() {...},
  }
}

성분 1

export default {
  mixins: [myMixin],
  // ...
  computed: {
    ...mapGetters([
      'getDog1',
      'getCat1',
    ])
  },
  methods: {
    ...mapActions([
      'setDog1',
      'setCat1',
    ])
  },
}

구성 요소 2

export default {
  mixins: [myMixin],
  // ...
  computed: {
    ...mapGetters([
      'getDog2',
      'getCat2',
    ])
  },
  methods: {
    ...mapActions([
      'setDog2',
      'setCat2',
    ]),
    sameFunction1() {...},
    sameFunction2() {...},
  },
}

참조URL: https://stackoverflow.com/questions/60427954/conventional-vue-structure-for-similar-functionalities-components-with-vuex