Поиск входных данных с использованием запроса с использованием Vuex и Axios

#javascript #html #vue.js #axios #vuex

#javascript #HTML #vue.js #axios #vuex

Вопрос:

Я пытаюсь создать поисковый ввод, в котором я ввожу запрос, и этот запрос добавляется к вызову 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 по умолчанию, что означает, что мой ввод не работает, я был бы признателен за помощь и заранее благодарю!

1. что-то в лице, которое query вычисляется , выглядит неправильно

2. @JaromandaX Я пытался использовать его для обработки данных, например «запрос: this.$store.state. запрос» но это тоже не сработало. Я часами гуглил, я не уверен, что делать

3. возможно vuejs.org/v2/guide/computed.html#Computed-Setter

4. @JaromandaX пробовал это ранее, тоже не сработало

5. может быть, вы сделали это неправильно — кажется, это должно сработать

Ответ №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>

JS:

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