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

Question

[Zhalgas Saparov]

Проблема в том что, я не могу получить данные используя цикл. Вот ссылка на 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) 
        })
      }
    }
  }

Что я делаю не так?

Comments

[Zhalgas Saparov]

Я убрал Апострофы и теперь запросы работают, но я вывести данные не могу. В компоненте, я вызываю действия и state

computed: {
    totalTvCount() {
      return this.$store.state.todos
    }
  },

  methods: {
    buyTv() {
      this.$store.dispatch('getTodo')
    }
  }

[alex]

Ясн

[Zhalgas Saparov]

Alex, Но код не работает(

Answer 1

[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>

Comments

[Zhalgas Saparov]

Для начало, прошу прощения за мою невнимательность. Я понял о чем вы написали, исправил некоторые моменты.
А как сформулировать цикл, чтобы он складывал все данные, а дальше вне цикла я коммитил?
Заранее благодарю

[Zhalgas Saparov]

state: {
    todos: [],
  },

  mutations: {

    setTodo(state, payload) {

      state.todos = payload
    }

  },

  actions: {

    getTodo(context) {
      for(let i = 1; i <= 9; i++) {
        Axios.get(`https://jsonplaceholder.typicode.com/todos/${i}`)
        .then(response => {
          
          let {data} = response.data

          context.commit('setTodo', data) 
        })
        .catch(error => {
          console.log(error)
        })
      }
    }

[Zhalgas Saparov]

Вот код от компонента

<template>
  <div class="hello">
    <h1>I'm a customer</h1>
    <div>
      <ul v-for="todo in todos" :key="todo">
        <li>{{todo.id}}</li>
        <li>{{todo.title}}</li>
        <li>{{todo.userId}}</li>
      </ul>
    </div>
    <button
      @click="getTodo()">
      Buy Tv
    </button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  computed: {
    todos() {
      return this.$store.state.todos
    }
  },

  methods: {
    getTodo() {
      this.$store.dispatch('getTodo')
    }
  }
}
</script>

[0xD34F]

дополнил ответ

[Zhalgas Saparov]

0xD34F, Все работает, интересное решение с помощью const*

[holfza]

Zhalgas Saparov, да, const решает :)