如何在 VueJs 的數據表中顯示數據？

Question

數據附加在數據表旁邊，而不是內部。

我在 vuex 的操作中從 API 獲取數據（記錄數組），並將 state（數組）從 getter 返回到使用數據表的組件。

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 獲取的數據必須顯示在數據表中。

據我了解，這里造成的問題是

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

這是之前執行的

this.getUsers()

這不應該是正確的解釋，因為我已經將 await 與 axios 一起使用。

誰能解釋為什么會這樣？

Answer 1

事實證明，當我在收到 axios 的響應后提交突變時，設置 state 需要時間。 由於我在這里沒有使用 promise，而 state 正在變異，

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

控制

this.getUsers()

並在完成之前執行。

我在 getUsers 操作中使用 promise 遇到了這個問題

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));
        })
    },

現在它就像一個魅力！