更改路线后闪烁存储数据答案

【问题标题】：blink store data after change route更改路线后闪烁存储数据
【发布时间】：2020-10-16 05:16:35
【问题描述】：

如何避免更新存储数据后数据闪烁？你可以在这里看到效果：

https://drive.google.com/file/d/178raL6AJiC4bpIOImnaTKh6Yf9GruTCz/view?usp=sharing

组件：

[...]
    mounted() {
        this.getIdeasFromBoard(this.$route.params.board_id);
    },
[...]

商店：

[...]
const actions = {
    getIdeasFromBoard({ commit, dispatch }, board_id) {
        apiClient
            .get('/ideas/' + board_id)
            .then((result) => {
                console.log('success');
                commit("SET_IDEAS_BOARD", result.data);
            })
            .catch(error => {
                console.log('error' + error);
                alert("You have failed to log in. Try again with another credentials.");
                dispatch('auth/logout', null,  { root: true });
                this.$router.push({ name: "public" });
            });
    },
[...]

我搜索了一些关于使用 api 进行错误处理的简单教程，但没有找到。

谢谢

【问题讨论】：

标签： api vue.js axios vuex

【解决方案1】：

这是因为IDEAS_BOARD 拥有之前的数据，直到新的 API 调用完成。在所选板的 API 调用完成之前，您需要显示加载程序或空白屏幕。

从操作返回一个承诺，以便您的组件知道调用何时完成。

getIdeasFromBoard({ commit, dispatch }, board_id) {
  return new Promise((resolve, reject) => {
      apiClient
        .get('/ideas/' + board_id)
        .then((result) => {
            console.log('success');
            commit("SET_IDEAS_BOARD", result.data);
            resolve()
        })
        .catch(error => {
            console.log('error' + error);
            alert("You have failed to log in. Try again with another credentials.");
            dispatch('auth/logout', null,  { root: true });
            this.$router.push({ name: "public" });
            reject()
        });
  })
},

在您的 .vue 组件中，

async mounted () {
  this.loading = true // some flag to display a loader instead of data
  await this.$store.dispatch()
  this.loading = false
}

肯定还有其他一些方法，比如在 Vuex 商店中拥有这个加载标志。但这取决于你

【讨论】：