使用 Vuex 和 Axios 使用查询搜索输入

Question

我正在尝试在输入查询的地方进行搜索输入，该查询被添加到 API 调用并返回我想要的数据，这是我的代码示例

      <input

    class="rounded-l-full w-full py-6 px-6 text-gray-700 leading-tight focus:outline-none"

    id="search"

    type="text"

    placeholder="Search"

    v-bind="query"

  />

    <button

      class="bg-blue-900 text-white rounded-full p-2 hover:bg-blue-700 focus:outline-none w-12 h-12 flex items-center justify-center"

      @click="getSearchResults()"

    >

      <font-awesome-icon :icon="['fas', 'search']" />

    </button>

我的JS：

    <script>

import { mapActions, mapGetters, mapState } from "vuex";

export default {

  name: "Main",

  data() {

    return {};

  },

  computed: {

    ...mapGetters(["searchResult"]),

    ...mapState({

      query: (state) => state.query,

    }),

  },

  methods: {

    ...mapActions(["getSearchResults"]),

  },

};

</script>

我的 vuex 模块：

    import axios from "axios";

const state = {

  results: [],

  query: "",

};

const getters = {

  searchResult: (state) => state.results,

};

const actions = {

  async getSearchResults() {

    let query = state.query;

    const res = await axios.get(

      `https://www.theaudiodb.com/api/v1/json/1/search.php?s=${query}`

    );

    res.data.artists.forEach((artist) => state.results.push(artist));

  },

};

const mutations = {

  returnResults: (state, results) => (state.results = results),

};

export default {

  state,

  getters,

  actions,

  mutations,

};

搜索查询没有通过输入传递，如果我在 Vuex 模块的查询中输入一些内容，我会得到正确的结果，但如果我输入一些内容并单击搜索按钮，我会得到 api JSON 的默认结果，这意味着我的输入不工作，我会很感激一些帮助，并提前致谢！

Answer 1

首先是你错误地使用了 v-bind，最好使用 v-model：<input&nbsp; &nbsp; class="rounded-l-full w-full py-6 px-6 text-gray-700 leading-tight focus:outline-none"&nbsp; &nbsp; id="search"&nbsp; &nbsp; type="text"&nbsp; &nbsp; placeholder="Search"&nbsp; &nbsp; v-model="query"&nbsp; />当你使用 vuex 时，第二件事是更好地组织你的代码，我会这样做：模板：// pass the variable query to the funcion getSearchResults<button&nbsp; &nbsp; &nbsp; class="bg-blue-900 text-white rounded-full p-2 hover:bg-blue-700 focus:outline-none w-12 h-12 flex items-center justify-center"&nbsp; &nbsp; &nbsp; @click="getSearchResults(query)"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <font-awesome-icon :icon="['fas', 'search']" />&nbsp; &nbsp; </button>记者：// Only import mapActions and mapGetters// create the variable query inside of data() for v-model<script>import { mapActions, mapGetters} from "vuex";export default {&nbsp; name: "Main",&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;query:"",&nbsp; &nbsp; &nbsp; };&nbsp; },&nbsp; computed: {&nbsp; &nbsp; ...mapGetters(["searchResult"]),&nbsp; &nbsp;&nbsp; &nbsp; }),&nbsp; },&nbsp; methods: {&nbsp; &nbsp; ...mapActions(["getSearchResults"]),&nbsp; },};</script>VUEX：import axios from "axios";const state = {&nbsp; results: [],};const getters = {&nbsp; searchResult: (state) => state.results,};const actions = {&nbsp; async getSearchResults({commit}, query) {&nbsp; &nbsp; const res = await axios.get(&nbsp; &nbsp; &nbsp; `https://www.theaudiodb.com/api/v1/json/1/search.php?s=${query}`&nbsp; &nbsp; );&nbsp; &nbsp; // Execute the mutation which receive the data and pass to the state&nbsp; &nbsp; commit('returnResults', res.data.artists)&nbsp; },};const mutations = {&nbsp; returnResults: (state, results) => (state.results = results),};export default {&nbsp; state,&nbsp; getters,&nbsp; actions,&nbsp; mutations,};