使用 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

    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-model="query"

  />

当你使用 vuex 时，第二件事是更好地组织你的代码，我会这样做：

模板：

// pass the variable query to the funcion getSearchResults

<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(query)"

    >

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

    </button>

记者：

// Only import mapActions and mapGetters

// create the variable query inside of data() for v-model

<script>

import { mapActions, mapGetters} from "vuex";

export default {

  name: "Main",

  data() {

    return {

         query:"",

      };

  },

  computed: {

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

   

    }),

  },

  methods: {

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

  },

};

</script>

VUEX：

import axios from "axios";

const state = {

  results: [],

};

const getters = {

  searchResult: (state) => state.results,

};

const actions = {

  async getSearchResults({commit}, query) {

    const res = await axios.get(

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

    );

    // Execute the mutation which receive the data and pass to the state

    commit('returnResults', res.data.artists)

  },

};

const mutations = {

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

};

export default {

  state,

  getters,

  actions,

  mutations,

};