如何在 Vue 3 Composition API 中设置 Pinia getter

我正在使用 Vue 3、Composition API 和 Pinia 构建 Pokemon 过滤搜索应用程序。我正在尝试设置应用程序，以便将从 Pokemon API 获取的响应传递到 fetchPokemon() 函数内的商店（使用 Pinia 设置）。

    const fetchPokemon = () => {
      axios.get("https://pokeapi.co/api/v2/pokemon?offset=0")
      .then((response) => {
        store.addPokemon(response.data.results)
      })
    }

将响应传递到商店后， updatePokemon() 函数使用 filter 和 include 方法过滤出商店中的 Pokemon 并将其与用户输入文本字段（“state.text”）中的 Pokemon 进行匹配：

    const updatePokemon = () => {
      if(!state.text) {
        return []
      }
      return store.getState.pokemons.filter((pokemon) => 
        pokemon.name.includes(state.text)
      )
    }

执行应用程序时，我在 updatePokemon() 函数中收到以下错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'includes')

我假设这意味着用于搜索/过滤的 .includes() 方法不能用于此搜索。我应该如何处理过滤器并包含将商店中的神奇宝贝与用户输入的神奇宝贝进行匹配的方法？

这是代码：

皮尼亚商店

import { defineStore } from 'pinia'

export const usePokemonStore = defineStore({
    id: 'store',
    state: () => ({
        pokemons: []
    }),
    getters: {
        getState(state) {
            return state
        }
    },
    actions: {
        addPokemon(name) {
            this.pokemons.push(name)
        }
    }
})

成分

<template>
  <div class="w-full flex justify-center">
    <input type="text" placeholder="Enter Pokemon here" 
    class="mt-10 p-2 border-blue-500 border-2" v-model="text"/>
  </div>
  <div class="mt-10 p-4 flex flex-wrap justify-center">
    <div class="ml-4 text-2x text-blue-400" 
    v-for="(pokemon, idx) in filteredPokemon" :key="idx">
      <router-link :to="`/about/${getPokemonId(pokemon.name)}`">
        {{ pokemon.name }} - with id {{ getPokemonId(pokemon.name) }}
      </router-link>
    </div>
  </div>
</template>

<script>
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: "",
      filteredPokemon: computed(()=> updatePokemon())
    })

    const updatePokemon = () => {
      if(!state.text) {
        return []
      }
      return store.getState.pokemons.filter((pokemon) => 
        pokemon.name.includes(state.text)
      )
    }

    const fetchPokemon = () => {
      axios.get("https://pokeapi.co/api/v2/pokemon?offset=0")
      .then((response) => {
        store.addPokemon(response.data.results)
      })
    }

    fetchPokemon()

    const getPokemonId = (item) => {
      console.log(item)
      return store.pokemons.findIndex((p) => p.name === item) + 1
    }

    return { ...toRefs(state), fetchPokemon, getPokemonId, updatePokemon, store }
  }
}
</script>

UPDATED

存储 - 不执行任何操作

import { defineStore } from 'pinia'

export const usePokemonStore = defineStore({
    id: 'store',
    state: () => ({
        pokemons: []
    })
})

组件 - 没有 store.addPokemon(...)

<template>
  <div class="w-full flex justify-center">
    <input type="text" placeholder="Enter Pokemon here" 
    class="mt-10 p-2 border-blue-500 border-2" v-model="text"/>
  </div>
  <div class="mt-10 p-4 flex flex-wrap justify-center">
    <div class="ml-4 text-2x text-blue-400" 
    v-for="(pokemon, idx) in filteredPokemon" :key="idx">
      <router-link :to="`/about/${getPokemonId(pokemon.name)}`">
        {{ pokemon.name }} - with id {{ getPokemonId(pokemon.name) }}
      </router-link>
    </div>
  </div>
</template>

<script>
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: "",
      filteredPokemon: computed(()=> updatePokemon())
    })

    const updatePokemon = () => {
      if(!state.text) {
        return []
      }
      return store.pokemons.filter((pokemon) => 
        pokemon.name.includes(state.text)
      )
    }

    const fetchPokemon = () => {
      axios.get("https://pokeapi.co/api/v2/pokemon?offset=0")
      .then((response) => {
        store.pokemons = response.data.results
      })
    }

    fetchPokemon()

    const getPokemonId = (item) => {
      console.log(item)
      return store.pokemons.findIndex((p) => p.name === item) + 1
    }

    return { ...toRefs(state), fetchPokemon, getPokemonId, store }
  }
}
</script>

首先，你不需要getState at all.

您可以使用usePokemonStore().pokemons直接地。调用返回的对象usePokemonStore()功能包括：

• 所有国家财产
• 所有行动
• 所有吸气剂。

以下是如何根据名称是否包含来获取过滤后的神奇宝贝数组state.text:

setup() {
  const store = usePokemonStore();
  const state = reactive({
    text: "",
    filteredPokemons: computed(() => store.pokemons.filter(
      pokemon => pokemon.name.includes(state.text)
    ))
  });
  return {
    ...toRefs(state)
  }
}

工作示例：

const { createApp, reactive, toRefs, computed, onMounted } = Vue;
const { defineStore, createPinia } = Pinia;

const usePokemons = defineStore('pokemon', {
  state: () => ({ pokemons: [] })
});
const pinia = createPinia();
createApp({
  pinia,
  setup() {
    const store = usePokemons(pinia);
    const state = reactive({
      searchTerm: '',
      filteredPokemons: computed(() => store.pokemons.filter(
        pokemon => pokemon.name.includes(state.searchTerm)
      ))
    });
    onMounted(() => {
      fetch('https://pokeapi.co/api/v2/pokemon?offset=0')
        .then(r => r.json())
        .then(r => store.pokemons = r.results)
    });
    return {
      ...toRefs(state)
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/pinia.iife.prod.js"></script>
<div id="app">
  <input v-model="searchTerm">
  <div v-for="pokemon in filteredPokemons">
    {{ pokemon.name }}
  </div>
</div>