Übergeben Sie den ausgewählten Wert: Verwenden Sie die Vuex-Implementierungsmethode in der Methode

Question

Ich habe versucht, meinen Auswahlwert in der FilterStatus-Methode mit Vuex zu übergeben, aber der Wert der Auswahloption wird nicht an die Methode übergeben.

Dies ist meine Komponente FilterStatus.vue. Ich verwende v-model, um den Wert der Option zu speichern, und verwende useStore, um den Status zu übergeben.

<template>
  <div class="filter">
    <select v-model="filter">
        <option value="">Alle</option>
        <option value="Alive">Alive</option>
        <option value="Tot">Tod</option>
        <option value="unknown">Unbekannt</option>
    </select>
  </div>
</template>

<script>
    importiere { useStore } aus 'vuex'

    Standard exportieren {
    aufstellen() {
        const store = useStore()

        const filter = ((status) => {
          store.dispatch('filterStatus', Status)
        })

        zurückkehren {
        Filter
        }
    }
}

</script>

<Stil>

</style>

In diesem Teil habe ich Vuex verwendet und in Aktionen habe ich meine filterStatus-Methode

import { createStore } from 'vuex'

Exportieren Sie den Standard-CreateStore({
  Zustand: {
    Figuren: [],
    ZeichenFilter: []
  },
  Mutationen: {
    setCharacters(state, payload) {
      state.characters = Nutzlast
    },
    setCharactersFilter(state, payload) {
      state.charactersFilter = Nutzlast
    }
  },
  Aktionen: {
    asynchrone getCharacters( {commit} ) {
      versuchen {
        const res = waiting fetch('https://rickandmortyapi.com/api/character')
        const data = warte auf res.json()
        commit('setCharacters', data.results)
        commit('setCharactersFilter', data.results)
      } Catch (Fehler) {
        console.log(Fehler)
      }
    },
    filterStatus({commit, state}, status) {
      const filter = state.characters.filter( (character) => {
        return charakter.status.includes(status)
      })
      commit('setCharactersFilter', filter)
    }
  },
  Module: {
  }
})

Vielen Dank für Ihre Hilfe

Answer 1

v-model应该给定一个数据变量，而不是一个函数。在Vue 3中，你还应该使用ref或reactive来声明这个变量，以创建响应式状态，例如：

const filter = ref('')

现在，当将其设置为选择器的v-model时，filter将保存所选选项的值。然后，你需要做的第二件事是使用“on change”事件监听器响应选择的变化，这样每次filter更新时，你都可以将其提交到你的vuex存储中。

<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>