여러 Vuex 경로에서 데이터를 로드하려면 다중 사용 Vue 구성 요소를 어떻게 구성해야 하는가?

여러 Vuex 경로에서 데이터를 로드하려면 다중 사용 Vue 구성 요소를 어떻게 구성해야 하는가?

여러 번 다른 vuex 네임스페이스를 가리키고(데이터를 로드) 인스턴스화할 수 있는 구성 요소를 만들고 싶다.이 부품은 대부분의 데이터를 Vuex에서 얻는다.그래서 Person 구성 요소가 있다고 가정하면, Vuex로의 다른 경로를 기반으로 Person 구성 요소의 많은 복사본을 인스턴스화할 수 있다.

내가 이 방법을 알아낸 가장 좋은 방법은 vuex 경로를 소품으로 통과하는 것이지만, mapGetters와 친구들은 .vue 파일이 인스턴스화될 때 네임스페이스를 필요로 하기 때문에 어떻게 사용하는지 모르겠다.

나는 이것을 구성할 수 있는 가장 좋은 "Vue way"에 대한 통찰력을 고맙다.여기 내가 지금 알아낸 가장 가까운 접근법이 있다.

Person.vue:

<template>
    <div>person {{name}} is {{age}} years old</div>
</template>

<script>
  export default {
    props: ['vuexNamespaceToLoadFrom'],

    // FIXME: how do I do a mapGetters with a dynamic namespace that's 
    // set through props???

    // I can't do the following since props aren't in scope yet :-(
    ...mapGetters(this.vuexNamespaceToLoadFrom, [ 'name', 'age'])

  }
</script>

다른 vuex 네임스페이스에서 속성을 로드하는 몇 명의 사용자 다중 사용 구성 요소 인스턴스화:

<Person vuex-namespace-to-load-from="api/jim">
<Person vuex-namespace-to-load-from="api/someotherpath/rachid">
<div>
 <Person vuex-namespace-to-load-from="api/alternatepeople/grace">
</div>

문제 정의를 좀 더 확대하자면,

export default {
  props: ['vuexNamespaceToLoadFrom'],
  ...
  computed: {
    ...mapGetters(this.vuexNamespaceToLoadFrom, [ 'name', 'age'])
  }
}

Vue가 구성 요소의 인스턴스를 만드는 데 사용하는 선언적 개체로, 인스턴스 속성을 다음과 같은 도움말에서 직접 사용할 수 없음mapGetters.

그러나 즉시 계산된 속성을 생성하는 이 논의는 인스턴스(instance) 속성의 평가를 지연시키는 방법을 보여준다.

기본적으로 계산된 get()의 본문은 인스턴스가 완전히 장착될 때까지 평가되지 않으므로 다음을 참조하십시오.this.$store그리고this[namespaceProp]여기서 일할 거야

시나리오에 맞게 조정하면

도우미 기능

function mapWithRuntimeNamespace({namespaceProp} = {}, props = []) {
  return props.reduce((obj, prop) => {
    const computedProp = {
      get() {
        return this.$store.getters[this[namespaceProp] + '/' + prop]
      }
    }
    obj[prop] = computedProp
    return obj
  }, {})
}

사용법

export default {
  props: ['vuexNamespaceToLoadFrom'],
  ...
  computed: {
    ...mapWithRuntimeNamespace(
      { namespaceProp: 'vuexNamespaceToLoadFrom' }, 
      ['name', 'age']
    )
  }
}

이건 어때?

사용자 구성 요소:

export default (vuexNamespace) => ({
  ...mapGetters(vuexNamespace, ['name', 'age']) 
})

상위 구성 요소:

export default {
  components: {
    Person: Person('someNamespace')
  }
}

시험해 보지는 않았지만 효과가 있어야 할 것 같아 :)

참조URL: https://stackoverflow.com/questions/49306549/how-should-i-structure-multiple-use-vue-components-to-load-data-from-different-v