更改路线后闪烁存储数据

Question

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

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的简单教程，但没有找到。

感谢

Answer 1

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

通过操作，返回一个promise，以便您的组件知道调用何时完成。

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商店中使用这个加载标志。但这取决于你