@winers
Начинающий программист

Как правильно выводить данные с API в Vuex 4?

Подскажите что не так делаю?
import {createStore} from 'vuex'
const axios = require('axios');

const baseURL = 'https://swapi.dev/api/people/';

export default createStore({
    state: {
        characters: [],
    },
    mutations: {
        SET_CHARACTERS: (state, payload) => {
            state.characters = payload;
        },
    },
    actions: {
        GET_CHARACTERS: async (context) => {
            let data = await axios.get(baseURL);
            context.commit('SET_CHARACTERS', data)
        }
    },
    getters: {
        CHARACTERS: state => {
            return state.characters;
        }
    },
    modules: {}
})



{{ $store.state.characters }}





<template>
    <div class="card">
        <div>{{ $store.state.characters }}</div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';
export default {
    computed: {
        ...mapGetters(['CHARACTERS'])
    }
}
</script>

<style lang="scss" src="./card.scss">

</style>
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Где вызов экшена GET_CHARACTERS? Не вижу. Надо добавить.

let data = await axios.get(baseURL);
context.commit('SET_CHARACTERS', data)

Здесь вы передаёте в мутацию объект ответа целиком - не только данные, но ещё и статус, заголовки и т.д. Кроме того, судя по дефолтному значению characters, вы желаете получить массив, а возвращается объект, содержащий оный массив в качестве свойства results. Так что пусть будет

const response = await axios.get(baseURL);
context.commit('SET_CHARACTERS', response.data.results);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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