Сопоставленные получатели не определены

Question

Я сопоставил набор методов получения в свой компонент и пытаюсь вызвать их с помощью параметра в методах, однако методы получения отображаются как неопределенные.Я сопоставил их после ответа на предыдущий вопрос

computed: {
    ...mapGetters([
        'products/getCategoryProducts', 
        'categories/getSubcategories', 
        'categories/getCategory'
    ]),

    products () {
        return this['products/getCategoryProducts'](this.id)
    },

    subCategories () {
        return this['categories/getSubcategories'](this.id)
    },

    category () {
        return this['categories/getCategory'](this.id)
    },
}

Ошибка:

TypeError: this.categories / getCategory не являетсяфункция

Я вошел в консоль this:

Редактировать: обновленный код после ответа @Luceos:

computed: {
    ...mapGetters({
        getProducts: 'products/getCategoryProducts', 
        getSubCategories: 'categories/getSubcategories', 
        getCategory: 'categories/getCategory'
    }),

    products () {
        return this.getProducts(this.id)
    },

    subCategories () {
        return this.getSubCategories(this.id)
    },

    category () {
        return this.getCategory(this.id)
    },
}

, который возвращает:

TypeError: this.getCategory не является функцией

Мой получатель:

getCategory: (state, id) => {
    return state.categories.filter(category => category.id === id);
}

Answer 1

Попробуйте это:

computed: {
    ...mapGetters({
        products: 'products/getCategoryProducts', 
        subcategories: 'categories/getSubcategories', 
        category: 'categories/getCategory'
    }),

    products () {
        return this.products(this.id)
    },

    subCategories () {
        return this.subcategories(this.id)
    },

    category () {
        return this.category(this.id)
    },
}

И ваши получатели должны быть функциями, ожидающими идентификатор, например:

getCategory: (state) => (id) => {
    return state.categories.filter(category => category.id === id);
}

Обязательно посмотрите документы Метод-стильДоступ

Answer 2

Согласно документации , вы можете выполнить рефакторинг этого, чтобы использовать методы доступа к стилю объекта:

...mapGetters({
  // map `this.doneCount` to `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Так что в вашей ситуации:

computed: {
    ...mapGetters('products', {
        products: 'getCategoryProducts'
    }),
    ...mapGetters('categories', {
        subCategories: 'getSubcategories', 
        category: 'getCategory'
    }),
}

Затем используйте это (при условии, что у этих получателей есть аргументы):

this.products(this.id)

Я посмотрел на пример корзины покупок , это их фрагмент, обновленный выше, чтобы соответствовать:

...mapGetters('cart', {
      products: 'cartProducts',
      total: 'cartTotalPrice'
    })