Api 更改路线后闪烁存储数据

如何避免更新存储数据后数据闪烁？ 您可以在此处看到效果：

组成部分：

[…]
安装的（）{
this.getIdeasFromBoard（this.route.params.board_id）；
},
[...]

商店：

[…]
常量动作={
getIdeasFromBoard（{commit，dispatch}，board_id）{
apiClient
.get（'/ideas/'+board_id）
。然后（（结果）=>{
console.log（'success'）；
提交（“设置想法板”，结果。数据）；
})
.catch（错误=>{
console.log（'error'+error）；
警报（“您登录失败。请使用其他凭据重试。”）；
分派（'auth/logout'，null，{root:true}）；
这是.$router.push（{name:“public”}）；
});
},
[...]

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

---

谢谢

这是因为在新的API调用完成之前，

IDEAS\u BOARD

具有以前的数据。在所选板的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()
        });
  })
},

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

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存储中使用此加载标志。但这取决于您