Почему не удаляется последний добавленный пост?

Question

[Mike]

Делаю todo app vue.js vuex. Реализовано добавление и удаление постов. Проблема в том что последний добавленный пост не удаляется с первого раза(удаляется только со второй попытки). Получаю в консоли DELETE localhost:8000/api/todo/undefined, но если второй раз жмякнуть на ссылку "удалить", оно удаляется. Вообщем последний пост приходит без "id".
Заметил ещё один нюанс. Если добавить три поста и начать удалять не с последнего добавленного поста а к примеру с первого добавленного, потом второй и наконец последний пост, то всё проходит без ошибок.
Мне кажется что мутация у меня не честная.

my store

import axios from 'axios'

const state = {
    name: [],
}

const actions = {
    GET_TODO: ({commit}) => {
        axios.get('/api/todo/')
        .then(response => {
            commit('GET_TODO', response.data)
        })
        .catch(error => {
            console.log(error)
        })
    },
    ADD_TODO: ({commit}, data)  => {
        axios.post('/api/todo/', data)
        .then(response => {
            commit('ADD_TODO', data)
            //commit('GET_TODO')
        })
        .catch(error => {
            console.log(error)
        })
    },
    DELETE_ONE_TODO: ({commit}, data) => {
        axios.delete('/api/todo/' + data + '/')
        .then(response => {
            commit('DELETE_ONE_TODO', data)
        })
    }
}

const mutations = {
    DELETE_ONE_TODO: (state, data) => {
        state.name = state.name.filter(name => name.id != data)  
    },
    GET_TODO: (state, name) => {
        state.name = name
    },
    ADD_TODO: (state, data) => {
        state.name.push(data)
        console.log(state.name)
    }
}

const getters = {
    name: state => state.name
}

export default {
    state,
    actions,
    mutations,
    getters
}

my home.vue

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
export default {
    name: 'Home',
    data() {
        return {
            new_todo: '',
            complete: false
        }
    },
    computed: mapGetters ({
        name: 'name'
    }),
    methods: {
        delete_one_todo(id) {
            this.$store.dispatch('DELETE_ONE_TODO', id)
            this.$store.dispatch('GET_TODO')
        },
        add_todo() {
            this.$store.dispatch('ADD_TODO', {
                'name': this.new_todo,
                'user': this.profile.pk,
                'complete': this.complete 
                }
            )
            this.new_todo = ''
            this.$store.dispatch('GET_TODO')
        }
    },
    created() {
        this.$store.dispatch('GET_TODO')
    }
}
</script>

Answer 1

[Анатолий Жаров]

есть мысль, что проблема в методе add_todo. Все экшены асинхронны, мутации происходят только после получения ответа от сервера, однако add_todo об этом совсем не печется.
GET запрос при добавлении отправляется не дожидаясь ответа от POST и возвращает элементы без последнего добавленного. После ответа от POST к элементам припушивается последний добавленный, причем без id.

Comments

[Mike]

Это значить что мне нужно обратиться к серверу методом GET после добавления поста, чтоб получить все посты ?

[Анатолий Жаров]

Mike, да, скорее всего vuex позволяет возвращать из экшенов промисы, можно это сделать ими. Подредактировал ответ

[Анатолий Жаров]

Mike, есть вариант при добавлении элемента возвращать его id, тогда и обновлять весь список не потребуется

[Mike]

Анатолий Жаров, ага, осталось разобраться только как это сделать.

[Анатолий Жаров]

Mike, не сильно сложно

const actions = {
    GET_TODO: ({commit}) => {
        return axios.get('/api/todo/')
            .then(response => {
                commit('GET_TODO', response.data)
            })
            .catch(error => {
                console.log(error)
            })
    },
    ADD_TODO: ({commit}, data)  => {
        return axios.post('/api/todo/', data)
            .then(response => {
                commit('ADD_TODO', data)
                //commit('GET_TODO')
            })
            .catch(error => {
                console.log(error)
            })
    },
    DELETE_ONE_TODO: ({commit}, data) => {
        return axios.delete('/api/todo/' + data + '/')
            .then(response => {
                commit('DELETE_ONE_TODO', data)
            })
    }
}

async add_todo() {
    await this.$store.dispatch('ADD_TODO', {
        name: this.new_todo,
        user: this.profile.pk,
        complete: this.complete 
    });
    this.new_todo = ''
    await this.$store.dispatch('GET_TODO')
}

[Mike]

Анатолий Жаров, Спасибо, работает. Потребовался только "yarn add babel-polyfill"