pass vue js component parameter to vuex method-style getter parameter

Question

New to vuex. Simple pokemon SPA that should display pokemon by generation and type. I am trying to write a method-style getter that will pass a component's parameter. EDIT: moved currentType to state:

//Vuex.Store
state: {
    pokemon: [],
    currentType: 'all'
},
getters:{
   availablePokemon: (state) => (currentType) => {
      if(!currentType || currentType === 'all'){
        return state.pokemon
      }else{
        return state.pokemon.filter(pokemon => {
//some api objects have two types
          if(pokemon.types.length === 2){
            if(pokemon.types[0] == currentType || pokemon.types[1] == currentType){
              return true
            }
          }else if(pokemon.types[0] == currentType){
            return true
          }
        })
      }
},
mutations:{
    changeType(state, type){
      state.currentType = type
    }
},
actions:{
   updateType(context, type){
      context.commit('changeType', type)
    }}
}

EDIT:

//Pokemon.vue
       <select name="type" id="type" @change="updateType($event.target.value)">
          <option v-for="(type, index) in types"
                  :key="index" 
                  :value="type">{{ type }}</option>
        </select>

       <li v-for="(pokemon, index) in allPokemon"
            :key="index">
            {{ pokemon.name }}
        </li>

export default {
  data(){
    return{
      types: ['all', 'bug', 'dragon'],
    }
  },

  computed: {
    allPokemon(){
//this fails, says currentType is undefined
      return this.$store.getters.availablePokemon(currentType)
    }
  },
  methods: {
    updateType(type){
      this.$store.dispatch('updateType', type)
    }
  }

The component method-style getter doesn't recognize the parameter. I've tried moving the currentType to my store (and updating it with an action => mutation => etc), but that didn't work either. Any ideas what I'm missing?

Stone · Accepted Answer · 2020-06-09 17:04:04Z

1

Architecturally, I'd store the currentType in the Vuex state object. Then, you can reference the currentType in the getter function - and - also reference the currentType app wide.

JSFiddle here for your reference (see javascript tab and console output): https://jsfiddle.net/qb47x2z1/38/

edited Jun 9, 2020 at 17:04

answered Jun 9, 2020 at 16:19

Stone

2,66826 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

notmynamelastname Over a year ago

I've moved currentType to state, added the necessary action => mutation, but in my component vue if I write: return this.$store.getters.availablePokemon(currentType), it says currentType is undefined, if I don't pass the param no list items render at all

Stone Over a year ago

@notmynamelastname - Can you please post your updated code?

notmynamelastname Over a year ago

I've edited the code. Not sure how to pass the param in the method-style getter....

Stone Over a year ago

@notmynamelastname - if you're storing the currentType in the Vuex state, you won't need to pass it in anymore, just set it in the Vuex state before you call the getter. Don't pass anything in to the getter anymore as it should already be available in the Vuex state. See my fiddle above.

Stone Over a year ago

@notmynamelastname - definitely check out vue dev tools for chrome - it might point out the issue for you. Especially the Vuex tab: chrome.google.com/webstore/detail/vuejs-devtools/…

|

Collectives™ on Stack Overflow

pass vue js component parameter to vuex method-style getter parameter

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related