Question

我对Vue很陌生，最近刚接触Vuex。我正在尝试通过API搜索。初始搜索可按预期进行。但是，如果使用其他查询执行搜索，则仅搜索以前返回的内容。

例如，如果我搜索“ ve”，则“ Vettel”和“ Verstappen”都将按预期返回。但是，如果我随后搜索没有先前返回的字母的任何内容，则不会显示任何内容，例如此后搜索汉密尔顿时，“火腿”将不会返回任何内容。

我已经尝试过修改突变，但是我不确定哪里出错了。

以下是组件：

<template>
  <transition
    appear
    appear-class="fade-enter"
    appear-to-class="fade-enter-to"
    appear-active-class="fade-enter-active"
  >
    <div>
      <h3>Current Standings</h3>

      <input type="text" v-model="searchQuery" v-on:input="search" placeholder="search driver">

      <table class="standings">
        <thead>
          <th>Position</th>
          <th>Driver Name</th>
          <th>Nationality</th>
          <th>Team</th>
          <th>Wins</th>
          <th>Points</th>
        </thead>
        <tbody>
          <tr v-for="standing in ALL_STANDINGS" :key="standing.position" class="standing">
            <td>{{standing.position }}</td>
            <td>{{standing.Driver.driverId | last-name | to-title-case}}</td>
            <td>{{standing.Driver.nationality | to-title-case}}</td>
            <td>{{standing.Constructors[0].constructorId | to-title-case}}</td>
            <td>{{standing.wins }}</td>
            <td>{{standing.points}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </transition>
</template>

<script>
import styles from "../styles/styles.scss";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
  name: "CurrentStandings",

  data() {
    return {
      searchQuery: ""
    };
  },

  created() {
    this.fetchStandings();
  },

  mounted() {
    this.created = true;
  },

  computed: {
    ...mapState(["standings", "filter"]),
    ...mapGetters(["ALL_STANDINGS", "GET_SEARCH", "FILTERED_SEARCH"])
  },

  methods: {
    ...mapActions(["fetchStandings"]),
    ...mapMutations(["SET_SEARCH", "SET_FILTER"]),

    search: function() {
      // set SEARCH to input
      this.$store.commit("SET_SEARCH", this.searchQuery);
      // return matches between ALL_STANDINGS and SEARCH
      this.SET_FILTER(
        this.ALL_STANDINGS.filter(standing => {
          return standing.Driver.driverId.match(this.GET_SEARCH);
        })
      );
    }
  }
};
</script>

这是standings.js模块：

import axios from 'axios';

const state = {
  standings: [],
  filter: [],
  search: '',
};

const getters = {
  /* eslint no-shadow: ["error", { "allow": ["state"] }] */
  ALL_STANDINGS: state => state.standings,
  FILTERED_STANDINGS: state => state.filter,
  GET_SEARCH: state => state.search,

};

const mutations = {
  SET_STANDINGS: (state, standings) => (state.standings = standings),
  SET_SEARCH: (state, search) => (state.search = search),
  SET_FILTER: (state, filter) => (state.standings = filter),
  RESET_STANDINGS: (state, standings) => (state.filter = standings),

};


const actions = {
  async fetchStandings({ commit }) {
    const response = await axios.get('https://ergast.com/api/f1/current/driverStandings.json');

    commit('SET_STANDINGS', response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings); // response.data is passed to 'standings' in the mutation (2nd arg)
  },

};

任何帮助将不胜感激！谢谢：）

Answer 1

执行过滤时，您不应修改初始数据集：

  SET_FILTER: (state, filter) => (state.standings = filter),

应该是

  SET_FILTER: (state, filter) => (state.filter = filter),

Answer 2

我通过使用较少的变异和使用的吸气剂简化了项目，而不是直接修改状态来弄清楚了：

  data() {
    return {
      searchQuery: "",
    };
  },

  created() {
    this.fetchStandings();
  },

  computed: {
    ...mapState(["standings", "search", "filter"]),
    ...mapGetters(["filteredStandings", "sortedFilteredStandings"])
  },

  methods: {
    ...mapActions(["fetchStandings"]),
    ...mapMutations(["SET_SEARCH"]),

    filterStandings() {
      this.$store.commit("SET_SEARCH", this.searchQuery);
    }
  }

商店：

const state = {
  standings: [],
  search: '',
};

const getters = {

  filteredStandings: state => state.standings.filter(standing => standing.Driver.driverId.match(state.search)),
};

const mutations = {
  SET_STANDINGS: (state, standings) => (state.standings = standings),
  SET_SEARCH: (state, search) => (state.search = search),
};

搜索的项目取决于先前的结果

2 个答案: