正在搜索的项目取决于先前的结果答案

【问题标题】：Items being searched depend on previous result正在搜索的项目取决于先前的结果
【发布时间】：2019-06-04 20:38:26
【问题描述】：

我对 Vue 很陌生，最近开始研究 Vuex。我正在尝试通过 API 进行搜索。初始搜索按预期工作。但是，如果使用不同的查询执行搜索，则只会搜索之前返回的内容。

例如，如果我搜索“ve”，“Vettel”和“Verstappen”都会按预期返回。但是，如果我在没有先前返回的字母的情况下搜索任何内容，则不会出现任何内容，例如之后搜索 Hamilton 时的“ham”不会返回任何内容。

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

这是组件：

<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)
  },

};

任何帮助将不胜感激！谢谢:)

【问题讨论】：

this.searchQuery 在哪里定义？我看到你在使用它，但没有看到它在任何地方初始化。
抱歉，我刚刚编辑了帖子以包含完整的组件，我的错！

标签： javascript vue.js vuex

【解决方案1】：

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

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

应该是

  SET_FILTER: (state, filter) => (state.filter = 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 ( !this.GET_SEARCH || this.FILTERED_STANDINGS, console.log(typeof this.FILTERED_STANDINGS) ); }) );
对不起上面的格式！代码可以在我的Github上找到

【解决方案2】：

我通过使用更少的突变和使用 getter 来简化项目来解决这个问题，而不是直接修改状态：

  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),
};

【讨论】：