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

Question

[Максим js]

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

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: {}
})

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

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

Answer 1

[0xD34F]

Где вызов экшена 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);

<div>{{ $store.state.characters }}</div>

Раз выводите массив - выводите его поэлементно:

<div v-for="n in $store.state.characters">
  {{ n.name }}
</div>

UPD. https://jsfiddle.net/o3wszLdv/

Comments

[Максим js]

а где его нужно вызывать? экшен GET_CHARACTERS

[Максим js]

Думал он автоматически там обрабатывается

[0xD34F]

Да мне-то откуда знать? Вам нужно - вам и виднее, где вызывать.

[Максим js]

0xD34F, как его вызывать?) так что-ли

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

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

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

</style>

[0xD34F]

А документацию открыть и почитать - нет, не пробовали?

[Максим js]

0xD34F, пробовал

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) => {
            const response = await axios.get(baseURL);
            context.commit('SET_CHARACTERS', response.data.results);
        }
    },
    getters: {
        CHARACTERS: state => {
            return state.characters;
        }
    },
    modules: {}
})

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

<script>
import {mapGetters, mapActions, mapMutations} from 'vuex';
export default {
    computed: {
        ...mapGetters(['CHARACTERS'])
    },
    methods: {
        ...mapMutations(['SET_CHARACTERS']),
        ...mapActions(['GET_CHARACTERS'])
    },
    mounted() {
        console.log(this.$store.state)
    },
}
</script>

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

</style>

вроде все правильно, ошибок нет, но массив пустой один фиг(

[0xD34F]

Повторяю, попробуйте почитать документацию.

[0xD34F]

Короче, добавил в ответ ссылку на пример - смотрите, думайте.

[Максим js]

0xD34F, Благодарю

[Максим js]

0xD34F,

export default {
    created() {
        this.$store.dispatch('GET_CHARACTERS');
    },
}

где там в документации про created() что сказано?
в итоге без mapActions и mapGetters все выводится на страницу

<template>
    <div class="card">
        <div v-for="n in $store.state.characters" :key="n.id" class="character">
            <div>Name: {{ n.name }}</div>
            <div>Birth year: {{ n.birth_year }}</div>
        </div>
    </div>
</template>

<script>
export default {
    created() {
        this.$store.dispatch('GET_CHARACTERS');
    },
}
</script>

совсем не как в документации

[0xD34F]

А при чём тут created? Вы уже должны быть в курсе, что это такое и зачем. И сами должны были догадаться подставить в него вызов экшена.

[Максим js]

0xD34F, нет, я не в курсе, я только изучаю vue и пытаюсь понять как работать с vuex для получения данных с api в любой компонет. Чтобы не делать каждый раз получение данных в компоненте

[Максим js]

0xD34F, Напишите если не сложно как правильно это делается с небольшими комментариями пожалуйста

[0xD34F]

Если данные должны быть доступны везде - тогда инициируйте их получение при создании экземпляра корневого компонента приложения. Или даже раньше:

store.dispatch('какой-то_экшен').then(() => {
  Vue.createApp({ ... }).use(store).mount('...');
});