传递选择的值:使用vuex在方法中的实现方法
P粉218775965
P粉218775965 2023-08-20 22:01:35
[Vue.js讨论组]

我尝试在使用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: {
  }
})

非常感谢您的帮助

P粉218775965
P粉218775965

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号