title: How to set up Pinia getter in Vue 3 Composition API
body: <p>I am building a Pokemon filtered search app using Vue 3, Composition API, and Pinia. I am attempting to set up the app so that the fetched response from the Pokemon API is passed to a store (set up using Pinia) inside the fetchPokemon() function.</p>
  <pre><code>    const fetchPokemon = () =&gt; {
        axios.get(&quot;https://pokeapi.co/api/v2/pokemon?offset=0&quot;)
        .then((response) =&gt; {
          store.addPokemon(response.data.results)
        })
      }
  </code></pre>
  <p>After passing the response to the store, the updatePokemon() function uses filter and include methods to filter out and match Pokemon in the store with Pokemon in the user-input text field (&quot;state.text&quot;):</p>
  <pre><code>    const updatePokemon = () =&gt; {
        if(!state.text) {
          return []
        }
        return store.getState.pokemons.filter((pokemon) =&gt; 
          pokemon.name.includes(state.text)
        )
      }
  </code></pre>
  <p>When executing the app, I am getting the following error in the updatePokemon() function:</p>
  <pre><code>Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'includes')
  </code></pre>
  <p>I'm assuming this means the .includes() method for searching/filter cannot be used for this search. How should I go about handling the filter and include methods to match Pokemon in the store with the user-inputted Pokemon?</p>
  <p>Here is the code:</p>
  <p>Pinia Store</p>
  <pre><code>import { defineStore } from 'pinia'
  
  export const usePokemonStore = defineStore({
      id: 'store',
      state: () =&gt; ({
          pokemons: []
      }),
      getters: {
          getState(state) {
              return state
          }
      },
      actions: {
          addPokemon(name) {
              this.pokemons.push(name)
          }
      }
  })
  </code></pre>
  <p>Component</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;w-full flex justify-center&quot;&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;Enter Pokemon here&quot; 
      class=&quot;mt-10 p-2 border-blue-500 border-2&quot; v-model=&quot;text&quot;/&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mt-10 p-4 flex flex-wrap justify-center&quot;&gt;
      &lt;div class=&quot;ml-4 text-2x text-blue-400&quot; 
      v-for=&quot;(pokemon, idx) in filteredPokemon&quot; :key=&quot;idx&quot;&gt;
        &lt;router-link :to=&quot;`/about/${getPokemonId(pokemon.name)}`&quot;&gt;
          {{ pokemon.name }} - with id {{ getPokemonId(pokemon.name) }}
        &lt;/router-link&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  import { reactive, toRefs, computed } from 'vue';
  import { usePokemonStore } from '@/store';
  
  export default {
    name: 'Home',
    setup() {
  
      const store = usePokemonStore()
  
      const state = reactive({
        text: &quot;&quot;,
        filteredPokemon: computed(()=&gt; updatePokemon())
      })
  
      const updatePokemon = () =&gt; {
        if(!state.text) {
          return []
        }
        return store.getState.pokemons.filter((pokemon) =&gt; 
          pokemon.name.includes(state.text)
        )
      }
  
      const fetchPokemon = () =&gt; {
        axios.get(&quot;https://pokeapi.co/api/v2/pokemon?offset=0&quot;)
        .then((response) =&gt; {
          store.addPokemon(response.data.results)
        })
      }
  
      fetchPokemon()
  
      const getPokemonId = (item) =&gt; {
        console.log(item)
        return store.pokemons.findIndex((p) =&gt; p.name === item) + 1
      }
  
      return { ...toRefs(state), fetchPokemon, getPokemonId, updatePokemon, store }
    }
  }
  &lt;/script&gt;
  
  </code></pre>
  <p><em><strong>UPDATED</strong></em></p>
  <p>Store - with not action</p>
  <pre><code>import { defineStore } from 'pinia'
  
  export const usePokemonStore = defineStore({
      id: 'store',
      state: () =&gt; ({
          pokemons: []
      })
  })
  </code></pre>
  <p>Component - with no store.addPokemon(...)</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;w-full flex justify-center&quot;&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;Enter Pokemon here&quot; 
      class=&quot;mt-10 p-2 border-blue-500 border-2&quot; v-model=&quot;text&quot;/&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mt-10 p-4 flex flex-wrap justify-center&quot;&gt;
      &lt;div class=&quot;ml-4 text-2x text-blue-400&quot; 
      v-for=&quot;(pokemon, idx) in filteredPokemon&quot; :key=&quot;idx&quot;&gt;
        &lt;router-link :to=&quot;`/about/${getPokemonId(pokemon.name)}`&quot;&gt;
          {{ pokemon.name }} - with id {{ getPokemonId(pokemon.name) }}
        &lt;/router-link&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  import { reactive, toRefs, computed } from 'vue';
  import { usePokemonStore } from '@/store';
  
  export default {
    name: 'Home',
  
    setup() {
  
      const store = usePokemonStore()
  
      const state = reactive({
        // pokemons: [],
        text: &quot;&quot;,
        filteredPokemon: computed(()=&gt; updatePokemon())
      })
  
      const updatePokemon = () =&gt; {
        if(!state.text) {
          return []
        }
        return store.pokemons.filter((pokemon) =&gt; 
          pokemon.name.includes(state.text)
        )
      }
  
      const fetchPokemon = () =&gt; {
        axios.get(&quot;https://pokeapi.co/api/v2/pokemon?offset=0&quot;)
        .then((response) =&gt; {
          store.pokemons = response.data.results
        })
      }
  
      fetchPokemon()
  
      const getPokemonId = (item) =&gt; {
        console.log(item)
        return store.pokemons.findIndex((p) =&gt; p.name === item) + 1
      }
  
      return { ...toRefs(state), fetchPokemon, getPokemonId, store }
    }
  }
  &lt;/script&gt;
  
  </code></pre>