Как показать данные в Datatables в VueJs?

Question

Данные добавляются рядом с таблицей данных, а не внутри.

Я извлекаю данные (массив записей) из API в действиях vuex и возвращаю состояние (массив) из геттеров в компоненты, в которых были использованы данные.

import axios from "../../assets/constants";
import router from '../../router'

const state = {
    users: []
}
const getters = {
    users: state => state.users,
    blockedUsers: state => state.blockedUsers,
    user: state => state.user
}

const actions = {
    async getUsers({ commit }) {
        await axios.get(`user`)
            .then(res => {
                commit('setGetUsers', res.data)
            })
            .catch(err => console.log(err.response.data.message));
    })
},

const mutations = {
    setGetUsers: (state, newUsers) => (state.users = newUsers),
}

export default {
    state,
    getters,
    actions,
    mutations
}

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  methods: {
    ...mapActions(["getUsers"])
  },
  computed: mapGetters(["users"]),
  created() {
    this.getUsers();
    $(".zero-configuration").DataTable();
  }
};
</script>

Результатом должно быть то, что данные, которые я получаю из API, должны отображаться внутри datatable.

Насколько я понимаю, проблема, которая здесь вызывает, заключается в том, что

$ (". Zero-configuration") .DataTable ();

это выполняется до

this.getUsers ()

, что не должно быть правильным объяснением, поскольку я использовал await с axios.

Кто-нибудь может объяснить, почему это происходит?

Answer 1

Оказывается, когда я фиксирую мутацию после получения ответа от axios, требуется время, чтобы установить состояние. Так как здесь я не использую обещание, пока состояние меняется,

$ (". Zero-configuration"). DataTable ();

получает контроль от

this.getUsers ()

и выполняется до его завершения.

Я столкнулся с этой проблемой при использовании обещания в действии getUsers

getUsers({ commit }) {
        return new Promise(async (resolve) => {
            await axios.get(`user`)
                .then(async res => {
                    await commit('setGetUsers', res.data)
                    resolve()
                })
                .catch(err => console.log(err.response.data.message));
        })
    },

Теперь это работает как шарм!