对于这样的组件
<template>
<div>
<router-link :to="{name:'section', params: { sectionId: firstSectionId }}">Start</router-link>
</div>
</template>
<script lang="ts">
import { mapActions } from "vuex"
export default {
mounted() {
this.getSectionId()
},
computed: {
firstSectionId() {
return this.$store.state.firstSectionId
}
},
methods: mapActions(["getSectionId"])
}
</script>
店铺:
const store: any = new Vuex.Store({
state: {
firstSectionId: null
},
// actions,
// mutations
})
我在 getSectionId
操作中有一个 Web 请求,它异步获取数据并调用将填充 firstSectionId
在 state
--- 中的突变。在初始渲染期间 firstSectionId
是 null
并且我收到警告说在渲染 router-link
期间缺少必需的参数。
在这里添加 v-if="firstSectionId"
不是问题。但总的来说,从服务器获取数据以显示的方法是什么?目前我所有的组件都在渲染之前检查存储中是否存在数据,这是正常的还是有更好的方法在渲染之前等待数据加载?
原文由 Sly 发布,翻译遵循 CC BY-SA 4.0 许可协议
异步获取数据的一种方法是在 vuex 存储 操作 中使用 Promise。
为了证明我向 这条路线 提出请求。您可以看到响应应该是什么样子。让我们将响应对象保存在 state.users 数组中。
store.js
您注意到提交后有
self.filteruser()
方法。那是关键时刻。在此之前,我们 提交了一个 mutation ,这是同步操作,我们确信我们将在 store.state 中有我们的响应,可以在filterUsers()
方法中使用 (不要忘记传递 self parm)用户.vue
更好的方法(ES6 和 ES7)
ES6 Promises 异步编程
ES7:异步/等待
为了摆脱回调地狱,并改进异步编程,使用
async
函数,你可以await
承诺。代码看起来更容易理解(就像它是同步的一样),但是代码对于浏览器来说是不可读的,所以你需要 Babel transpiler 来运行它。