vuejs2 возвращает список пользователей через магазин Axios

Question

Как вернуть список всех пользователей, чтобы они могли быть перечислены в таблице?

Axios работает нормально, и версия этого прекрасно работает для возвращения одного пользователя.Я думаю, что по какой-то причине он возвращает пустой массив.

allUsers ({commit, state}) {
  if (!state.idToken) {
    return
  }
  globalAxios.get('/users.json')
    .then(res => {
      const data = res.data
      const allUsers = []
       for (let key in data) {
         const alluser = data[key]
         user.id = key
         users.push(user)
       }
      commit('storeUser', AllUsers)
    })
    .catch(error => console.log(error))
  }

Скрипт:

import axios from 'axios';

  export default {

    computed: {
      allUsers () {
        return !this.$store.getters.alluser ? false : this.$store.getters.alluser
      },
    },
    created () {
      this.$store.dispatch('allUsers')
    }
  }

Шаблон HTML:

<p v-if="allUsers">allUsers: {{ allUsers }}</p>

Answer 1

Вы не используете переменные, которые вы определили в своем действии. Это только проблема синтаксиса. Исправить так:

allUsers ({commit, state}) {
  if (!state.idToken) {
    return
  }
  globalAxios.get('/users.json')
    .then(res => {
      const data = res.data
      const allUsers = []
      for (let key in data) {
        const user = data[key]
        user.id = key
        allUsers.push(user)
     }
    commit('storeUser', allUsers)
  })
  .catch(error => console.log(error))
}

Answer 2

это может быть опечатка?

allUsers ({commit, state}) {
  if (!state.idToken) {
    return
  }
  globalAxios.get('/users.json')
    .then(res => {
      const data = res.data
      const allUsers = []
       for (let key in data) {
         const alluser = data[key]
         user.id = key
         users.push(user)
       }
      commit('storeUser', allUsers) // <--- lower case
    })
    .catch(error => console.log(error))
  }

---

для отображения пользователей ...

<div v-if="allUsers">
  <div v-for="u in allUsers" :key="u.id">{{ u.email }}</div>
</div>
<div v-else>
  ...Loading...
</div>