CODEWITHSUNDEEP
vue.jsvuejs2vuex
Jam3sn
Jam3sn

Reputation: 1087

Mapped getters are undefined

I've mapped a set of getters into my component and am trying to call them with a parameter in methods, however the getters are coming up as undefined. I've mapped them following an answer on a 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)
    },
}

The error being:

TypeError: this.categories/getCategory is not a function

I've console logged this:

console.log(this)

console.log(this) continued

Edit: Updated code following @Luceos answer:

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

Which returns:

TypeError: this.getCategory is not a function

My getter:

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

Upvotes: 2

Views: 3492

Answers (3)

Meysam Rahnama
Meysam Rahnama

Reputation: 19

i had this error:

TypeError: (0 , vuex__WEBPACK_IMPORTED_MODULE_8__.default) is not a function

and I noticed my import was default import. so it was like this :

import mapGetters from "vuex";

turned to named import and problem solved :

import {mapGetters} from "vuex";

Upvotes: 0

Roland
Roland

Reputation: 27729

Try this:

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

And your getters should be functions expecting the id for example:

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

Make sure to take a look at docs Method-Style Access

Upvotes: 3

Luceos
Luceos

Reputation: 6730

As per documentation, you can refactor this to use object style accessors:

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

So in your situation:

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

Then use that (assuming those getters have arguments): 

this.products(this.id)

I've taken a look at the shopping cart example, this is their snippet, updated the above to match:

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

Upvotes: 1

Related Questions