@zettt
UX/UI Web-designer, junior Vue.js devolper

Как получить данные из api используя цикл в vuex?

Проблема в том что, я не могу получить данные используя цикл. Вот ссылка на api.

Во vuex, я написал вот такой вод код:

state: {
    todos: [],
  },

  mutations: {

    setTodo(state, payload) {

      state.totalTvCount = payload
    }

  },

  actions: {

    getTodo(context) {
      for(var i = 0; i < 9; i++) {
        Axios.get(`'https://jsonplaceholder.typicode.com/todos/${i}'`)
        .then((response) => {
          context.commit('setTodo', response) 
        })
      }
    }
  }

Что я делаю не так?
  • Вопрос задан
  • 331 просмотр
Решения вопроса 1
0xD34F
@0xD34F
  • Вызов Axios.get - лишние кавычки (внутренние)
  • Пытаетесь запрашивать несуществующие данные - на первой итерации цикла id равен нулю, объекта с таким id указанный вами api не возвращает
  • Вызов мутации - вместо response следует передавать response.data
  • В самой мутации - изменяете одно свойство, а в стейте у вас какое-то другое
  • Опять же, в мутации - выполняется присваивание, хотя, судя по коду в экшене (цикл), результаты должны складываться в массив (то есть, необходимо изменить или экшен, или мутацию - в первом случае следует собирать массив полностью, и только потом делать один общий коммит, во втором случае вместо присваивания должен выполняться push)

UPD. Исправляем:

mutations: {
  setTodos: (state, todos) => state.todos = todos,
},
actions: {
  async getTodos({ commit }) {
    const results = [];

    for (let i = 1; i <= 10; i++) {
      try {
        const { data } = await axios.get(`https://jsonplaceholder.typicode.com/todos/${i}`);
        results.push(data);
      } catch (e) {
        console.log(e);
      }
    }

    commit('setTodos', results);
  },
},

<ul>
  <li v-for="n in $store.state.todos" :key="n.id">
    <div>#{{ n.id }}</div>
    <div>{{ n.title }}</div>
  </li>
</ul>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы