傳遞選擇的值：使用vuex在方法中的實作方法

Question

我嘗試在使用Vuex的FilterStatus方法中傳遞我的選擇值，但它沒有將選擇選項的值傳遞給該方法。

這是我的元件FilterStatus.vue，我使用v-model儲存選項的值，並使用useStore傳遞狀態

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

<script>
    import { useStore } from 'vuex'

    export default {
    setup() {
        const store = useStore()

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

        return {
        filter
        }
    }
}

</script>

<style>

</style>

在這部分中，我使用了Vuex，在actions中有我的filterStatus方法

import { createStore } 從 'vuex'

export default createStore({
  state: {
    characters: [],
    charactersFilter: []
  },
  mutations: {
    setCharacters(state, payload) {
      state.characters = payload
    },
    setCharactersFilter(state, payload) {
      state.charactersFilter = payload
    }
  },
  actions: {
    async getCharacters( {commit} ) {
      try {
        const res = await fetch('https://rickandmortyapi.com/api/character')
        const data = await res.json()
        commit('setCharacters', data.results)
        commit('setCharactersFilter', data.results)
      } catch (error) {
        console.log(error)
      }
    },
    filterStatus( {commit, state}, status ) {
      const filter = state.characters.filter( (character) => {
        return character.status.includes(status)
      })
      commit('setCharactersFilter', filter)
    }
  },
  modules: {
  }
})

非常感謝您的幫忙

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>