programing

Vue 동적 mapGetters

kingscode 2022. 7. 11. 23:27
반응형

Vue 동적 mapGetters

동적 mapGetters를 만들기 위해 사용하는 소품이 있지만, mapGetters는 소품보다 먼저 계산되어 있기 때문에 소품이 정의되지 않은 것으로 인식합니다.내가 어떻게 역동적으로 만들 수 있는지 아는 사람 있어?코드는 다음과 같습니다.

export default {
    props: ['listType'],
    components: {
        addrow: AddRow
    },
    computed: {
        ...mapGetters({
            list: `${this.listType}/list`,
            current: 'Dropdown/current'
        }) 
    },
}

[업데이트] @boussadjrabrahim 덕분에 솔루션을 찾았습니다.작업 코드는 다음과 같습니다.

export default {
    props: ['listType'],
    components: {
        addrow: AddRow
    },
    computed: {
        ...mapGetters({
            current: 'Dropdown/current'
        }), 

        ...mapState({
            list (state, getters) {
                return getters[`${this.listType}/list`]
            }
        })
    }
}

를 사용할 수도 있습니다.this.$store스토어에 완전히 액세스 할 수 있습니다.그렇게,list될 것이다

export default {
    props: ['listType'],
    computed: {
        list() {
            return this.$store.getters[`${this.listType}/list`]
        }
    }
}

디스패치 메서드를 사용하여 다음과 같은 액션을 트리거합니다.

export default {
    props: ['listType'],
    methods: {
        sortList(order) {
            this.$store.dispatch(`${this.listType}/list`, order)
        }
    }
}

내가 찾은 것은 기본적으로 당신 자신의 것을 굴리는 것이었다.mapGetters의 메서드created()라이프 사이클의 스테이지.

이 솔루션은 아직 충분히 검증되지 않았기 때문에, 어떠한 「취득」이 생기는지 알 수 없습니다.항상 그렇듯이, 경고의 공허자.

export default {
  props: ['listType'],
  components: {
    addrow: AddRow
  },
  created() {
    // This can be configured a number of ways, but for brevity:
    const mappableGetters = {
      list: `${this.listType}/list`,
      current: 'Dropdown/current'
    }

    Object.entries(mappableGetters).forEach(([key, value]) => {
      // Dynamically defines a new getter on `this`
      Object.defineProperty(this, key, { get: () => { return this.$store.getters[value] } })
    })

    // Now you can use: `this.list` throughout the component
  },
  computed: {
    // Roll your own mapper above in `created()`
    // ...mapGetters({
    //   list: `${this.listType}/list`,
    //   current: 'Dropdown/current'
    // })
  }
}

언급URL : https://stackoverflow.com/questions/52577895/vue-dynamic-mapgetters

반응형