映射的 getter 未定义

Question

我已将一组 getter 映射到我的组件中，并尝试在方法中使用参数调用它们，但是 getter 出现时未定义。我已经根据previous 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)
    },
}

您的 getter 应该是期望 id 的函数，例如：

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

请务必查看文档Method-Style Access

Answer 2

根据documentation，您可以重构它以使用对象样式访问器：

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

所以在你的情况下：

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

然后使用它（假设那些 getter 有参数）：

this.products(this.id)

我看过shopping cart example，这是他们的sn-p，更新了上面的匹配：

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