How to get the latest ID with Vuex and Axios post request

Question

I'm using Vuex with Axios post request to create a new list in database, then I would like to get the latest ID so that I can redirect user to the newly created list. I was trying to use different options please see console.log in the component below, it always returns 1 (default value). How could I get the latest ID?

My response looks as follows:

1 - with getters - 1
2 - with computed - 1
3 - with vuex - 1
0 - 94

index.js

import Vue from 'vue';
import Vuex from 'vuex';

import placeList from './modules/placeList';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        placeList
    },
});

placeList.js

import Axios from 'axios';

const state = {
    newId: 1,
    name: '',
    description: '',
    private: 0,
};

const mutations = {
    setNewId(state, newId) {
        state.newId = newId;
    },
};

const getters = {
    getNewId: state => {
        return state.newId;
    }
};

const actions = {
    createNewPlaceList({ commit }, url ) {
         Axios
            .post(url, {
                'name': state.name,
                'description': state.description,
                'private': state.private,
            })
            .then(response => {
                commit('setNewId', response.data.newPlaceListId);

                console.log('0 - ' + response.data.newPlaceListId);
            })
            .catch(errors => {
                console.log(errors);
            });
    }
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
};

component

    import { mapState } from 'vuex';
    import { mapGetters } from 'vuex';

    export default {
        name: "PlaceListCreate",

        methods: {
            submitForm: function () {
                this.$store.dispatch('placeList/createNewPlaceList', <API URL>);

                console.log('1 - with getters - ' + this.testNewId);
                console.log('2 - with computed - ' + this.anewId);
                console.log('3 - with vuex - ' + this.$store.state.placeList.newId);

                // Redirect to new created list
                     this.$router.push({ name: 'active-list', params: {
                            id: <New ID>
                }});
            },
        },

        computed: {
            ...mapState([
                'name',
                'description',
                'private',
                'newId'
            ]),

            ...mapGetters([
                'getNewId'
            ]),

            anewId() {
                return this.$store.state.placeList.newId;
            },

            testNewId () {
                return this.$store.getters['placeList/getNewId'];
            }
        },
    }

Answer 1

It happens cause createNewPlaceList is asynchronous, to make this functions async, one way:

placeList.js

const actions = {
    async createNewPlaceList({ commit }, url ) {
         await Axios
            .post(url, {
                'name': state.name,
                'description': state.description,
                'private': state.private,
            })
            .then(response => {
                commit('setNewId', response.data.newPlaceListId);

                console.log('0 - ' + response.data.newPlaceListId);
            })
            .catch(errors => {
                console.log(errors);
            });
    }
};

component

methods: {
        submitForm: async function () {
            await this.$store.dispatch('placeList/createNewPlaceList', <API URL>);

            console.log('1 - with getters - ' + this.testNewId);
            console.log('2 - with computed - ' + this.anewId);
            console.log('3 - with vuex - ' + this.$store.state.placeList.newId);

            // Redirect to new created list
                 this.$router.push({ name: 'active-list', params: {
                        id: <New ID>
            }});
        },
    },