Assume you have a simple app ponent with a button to add multiple counters from a counter ponent using a vuex store.

Here is the whole thing on webpackbin.

A bit like the basic counter example from the vuex git repo.But you want to use the vuex getter with an ID that is handed over via a property on the ponent, how would you do that?

The getter has to be a pure function, so you can't use this.counterId. The official docs say you have to use a puted property, but that doesn't seem to work either. This code returns undefined for the getter:

import * as actions from './actions'

export default {
    props: ['counterId'],
    vuex: {
        getters: {
            count: state => state.counters[getId]
        },
        actions: actions
    },
    puted: {
        getId() { return this.counterId }
    },
}

Assume you have a simple app ponent with a button to add multiple counters from a counter ponent using a vuex store.

Here is the whole thing on webpackbin.

A bit like the basic counter example from the vuex git repo.But you want to use the vuex getter with an ID that is handed over via a property on the ponent, how would you do that?

The getter has to be a pure function, so you can't use this.counterId. The official docs say you have to use a puted property, but that doesn't seem to work either. This code returns undefined for the getter:

import * as actions from './actions'

export default {
    props: ['counterId'],
    vuex: {
        getters: {
            count: state => state.counters[getId]
        },
        actions: actions
    },
    puted: {
        getId() { return this.counterId }
    },
}

• javascript
• vue.js
• vuex

• your code seems to be right. The idea behind the "getId" puted property is for you to use properties from your Component, instead from your State. In your case, you are doing both. Nothing wrong with it, but pay attention to your logic when calling getId() and what are you getting from it. – Ricardo Vigatti Commented Jul 18, 2016 at 13:35
• the id is just the array index. the puted property itself works fine. tho the getter still returns undefined so there must be something wrong. I am using the puted property because you can't use this in the getter by definition. – Chris Commented Jul 18, 2016 at 14:52

1 Answer 1

getters should be pure functions and not dependent on ponent state.

you can still crate a puted prop from the getter, or directly use the store:

//option A
export default {
    props: ['counterId'],
    vuex: {
        getters: {
            counters: state => state.counters
        },
        actions: actions
    },
    puted: {
        currentCounter() { return this.counters[this.counterId] }
    },
}

//option B (better suited for this simple scenario)
import store from '../store'
puted: {
  currentCounter() {  
    return store.state.counters[this.counterId] 
  }
}