이름 지정 시 mapGetters의 Vuex 사용자 지정 이름이 참입니다.

이름 지정 시 mapGetters의 Vuex 사용자 지정 이름이 참입니다.

mapGetters에 커스텀 이름을 붙이고 템플릿에서 이 커스텀 이름을 사용하여 getters 이름이 아닌 mapGetters에 액세스할 때 mapGetters의 구문은 무엇인지 궁금합니다.

const store = createStore({
  modules: {
    prods: productsModule,
    cart: cartModule
  }
});

mapGetters 구문 ** ['products']가 잘못된 경우 getters 함수 이름입니다.

   ...mapGetters({
    prod: 'prods', ['products']
    })

이렇게 하면 작동하지만 mapGetters를 사용하여 작업을 수행합니다.

products() {
      return this.$store.getters['prods/products'];
}

템플릿에 있는 동안:

<product-item
    v-for="prod in products"
    :key="prod.id"
    :id="prod.id"
    :title="prod.title"
    :image="prod.image"
    :description="prod.description"
    :price="prod.price"
  ></product-item>

온라인으로 올바른 구문을 찾을 수 없습니다. 가능한지 알려주세요.정말 고마워요!

mapGetters(namespace: string, nameLookup: object)

첫 번째 인수는 네임스페이스 이름이고 두 번째 인수는 개체 검색입니다. 여기서 key는 컴포넌트에서 사용되는 커스텀 이름이고 value는 원래 getter 이름입니다.이는 같은 네임스페이스에서 여러 getter를 매핑하는 경우에 특히 유용합니다.

// maps this.myCustomProducts to this.$store.getters['prods/products']
mapGetters('prods', { myCustomProducts: 'products' })

예제:

<template>
  <div>
    <product-item v-for="prod in myCustomProducts" />
    <h2>Total: {{ cartTotal }}</h2>
  </div>
</template>

<script>
export default {
  computed: {
    ...mapGetters('prods', { myCustomProducts: 'products' }),
    ...mapGetters('cart', { cartTotal: 'total' }),
  }
}
</script>

데모 1

mapGetters(nameLookup: object)

또는 검색 값에 네임스페이스 이름을 포함할 수 있습니다. 여기서 원래 getter 이름 앞에 네임스페이스와 슬래시 구분 기호를 붙입니다.

mapGetters({
  myCustomProducts: 'prods/products',
  cartTotal: 'cart/total',
})

예제:

<template>
  <div>
    <product-item v-for="prod in myCustomProducts" />
    <h2>Total: {{ cartTotal }}</h2>
  </div>
</template>

<script>
export default {
  computed: {
    ...mapGetters({
      myCustomProducts: 'prods/products',
      cartTotal: 'cart/total'
    }),
  }
}
</script>

demp 2

언급URL : https://stackoverflow.com/questions/69309172/vuex-custom-name-for-mapgetters-while-namespaced-is-true