Lulus nilai yang dipilih: gunakan kaedah pelaksanaan vuex dalam kaedah

Question

Saya cuba menghantar nilai pilihan saya dalam kaedah FilterStatus menggunakan Vuex tetapi ia tidak menghantar nilai pilihan pilihan kepada kaedah tersebut.

Ini ialah FilterStatus.vue komponen saya, saya menggunakan model v untuk menyimpan nilai pilihan dan menggunakan useStore untuk lulus status

<template>
  <div class="filter">
    <pilih v-model="filter">
        <nilai pilihan="">Semua</option>
        <nilai pilihan="Alive">Alive</option>
        <nilai pilihan="Mati">Kematian</option>
        <nilai pilihan="tidak diketahui">Tidak diketahui</option>
    </select>
  </div>
</template>

<skrip>
    import { useStore } daripada 'vuex'

    eksport lalai {
    persediaan() {
        kedai const = useStore()

        penapis const = ((status) => {
          store.dispatch('status penapis', status)
        })

        kembali {
        penapis
        }
    }
}

</skrip>

<gaya>

</style>

Dalam bahagian ini, saya menggunakan Vuex dan dalam tindakan saya mempunyai kaedah penapisStatus saya

import { createStore } daripada 'vuex'

eksport createStore lalai({
  nyatakan: {
    watak: [],
    charactersFilter: []
  },
  mutasi: {
    setCharacters(negeri, muatan) {
      negeri.karakter = muatan
    },
    setCharactersFilter(negeri, muatan) {
      state.charactersFilter = muatan
    }
  },
  tindakan: {
    async getCharacters( {commit} ) {
      cuba {
        const res = tunggu ambil('https://rickandmortyapi.com/api/character')
        data const = menunggu res.json()
        commit('setCharacters', data.results)
        commit('setCharactersFilter', data.results)
      } tangkap (ralat) {
        console.log(error)
      }
    },
    filterStatus({commit, state}, status) {
      penapis const = state.characters.filter( (character) => {
        kembalikan character.status.includes(status)
      })
      commit('setCharactersFilter', penapis)
    }
  },
  modul: {
  }
})

Terima kasih banyak atas bantuan anda

Answer 1

v-model harus diberikan pembolehubah data, bukan fungsi. Dalam Vue 3, anda juga harus mengisytiharkan pembolehubah ini menggunakan ref或reactive untuk mencipta keadaan reaktif, contohnya:

const filter = ref('')

Kini, apabila menetapkannya sebagai model v pemilih, filter将保存所选选项的值。然后，你需要做的第二件事是使用“on change”事件监听器响应选择的变化，这样每次filterapabila dikemas kini, anda boleh memasukkannya ke kedai vuex anda.

<template>
  <div class="filter">
    <select v-model="filter" @change="filterChange">
      <option value="">全部</option>
      <option value="Alive">存活</option>
      <option value="Dead">死亡</option>
      <option value="unknown">未知</option>
    </select>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const filter = ref("");
    const filterChange = (e) => {
      console.log("filter", filter.value);
      // 可选：从实际事件中获取值，而不是使用v-model
      console.log("来自事件的filter", e.target.value); 
    };

    return {
      filter,
      filterChange,
    };
  },
};
</script>