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

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:

console.log(this)

console.log(this) continued

Изменить: обновленный код после ответа @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);
}
2
Jam3sn 23 Окт 2018 в 12:06

2 ответа

Лучший ответ

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

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);
}

Обязательно ознакомьтесь с документами. Доступ в стиле метода

3
roli roli 23 Окт 2018 в 09:42

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

...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'
    })
1
Luceos 23 Окт 2018 в 09:29
52945195