传递选择的值：使用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 } from '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>