对于这样的组件
<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"
不是问题。但一般来说,从服务器获取数据的方法是什么?目前我的所有组件都在检查呈现前是否存在数据,是否正常或是否有更好的方法等待数据在呈现之前加载?
答案 0 :(得分:53)
异步获取数据的一种方法是在vuex store 操作中使用 promise 。
Vue.http.get(API_URL)
.then((response) => {
//use response object
})
.catch((error => {
console.log(error.statusText)
}))
证明我向this route提出请求。您可以看到响应应该如何。让我们在state.users数组中保存响应对象。
<强> store.js 强>
const store = new Vuex.Store({
state: {
users: []
},
mutations: {
FETCH_USERS(state, users) {
state.users = users
}
},
actions: {
fetchUsers({ commit }, { self }) {
Vue.http.get("https://jsonplaceholder.typicode.com/users")
.then((response) => {
commit("FETCH_USERS", response.body);
self.filterUsers();
})
.catch((error => {
console.log(error.statusText)
}))
}
}
})
export default store
您注意到提交后有self.filteruser()
方法。那是至关重要的时刻。在此之前我们提交突变,这是同步操作,我们确信我们将在store.state中获得可以在filterUsers()
方法中使用的响应(don&# 39;忘记通过自我parm)
<强> Users.vue 强>
import store from "../store/store"
export default {
name: 'users',
created() {
this.$store.dispatch("fetchUsers", { self: this })
},
methods:{
filterUsers() {
//do something with users
console.log("Users--->",this.$store.state.users)
}
}
}
ES6对异步编程的承诺
//User.vue
created() {
this.$store.dispatch("fetchUser").then(() => {
console.log("This would be printed after dispatch!!")
})
}
//store.js
actions: {
fetchUser({ commit }) {
return new Promise((resolve, reject) => {
Vue.http.get("https://jsonplaceholder.typicode.com/users")
.then((response) => {
commit("FETCH_USERS", response.body);
resolve();
})
.catch((error => {
console.log(error.statusText);
}));
});
}
}
ES7:async / await
要远离回调地狱,并使用async
函数改进异步编程,你可以await
承诺。代码看起来更容易理解(就像它是同步的),但代码对于浏览器来说是不可读的,所以你需要使用Babel转换器来运行它。
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // wait for actionA to finish
commit('gotOtherData', await getOtherData())
}
}
答案 1 :(得分:1)
根据我的经验,如果您使用与预期结果相同类型的空值预设状态(如果您知道预期会发生什么),则可以跳过一些检查,例如,如果您有一系列项目,请从[]
开始,而不是null
,因为它不会破坏v-for
指令,.length
检查和类似的数据访问尝试。
但通常情况下,添加v-if
是非常正常的事情。有a section about this in the vue-router
documentation并检查属性是否存在正是它的建议。它提到的另一个可能的解决方案是在beforeRouteEnter
内部获取数据,这可以确保您始终可以使用已有数据的组件。
最终,两种解决方案都是正确的,它们之间的决定更多的是UX / UI问题。
答案 2 :(得分:-1)
我对地点和谷歌地图api有类似的要求。我需要从API中获取我的位置,将它们加载到列表中,然后使用地图组件中的那些来创建标记。我使用axios在Vuex动作中获取数据,在我的状态下加载了变异,然后使用getter来检索已安装的生命周期钩子中的结果数组。这导致在异步操作解决之前已挂起的空数组。
我使用store.subscribe以这种方式解决它:
<template>
<div class="google-map" :id="mapName"></div>
</template>
<script>
import GoogleMapsLoader from 'google-maps';
import { mapGetters } from 'vuex';
export default {
name: 'google-map',
props: ['name'],
computed: {
...mapGetters({
locations: 'locations/locations',
}),
},
data() {
return {
mapName: `${this.name}-map`,
};
},
mounted() {
this.$store.subscribe((mutation, state) => {
if (mutation.type === 'locations/SAVE_LOCATIONS') {
GoogleMapsLoader.KEY = 'myKey';
GoogleMapsLoader.load((google) => {
/* eslint-disable no-new */
const map = new google.maps.Map(document.getElementById('locations-map'));
// loop through locations and add markers to map and set map boundaries
const bounds = new google.maps.LatLngBounds();
// I access the resulting locations array via state.module.property
state.locations.locations.forEach((location) => {
new google.maps.Marker({
position: {
lat: location.latitude,
lng: location.longitude,
},
map,
});
bounds.extend({
lat: location.latitude,
lng: location.longitude,
});
});
map.fitBounds(bounds);
});
}
});
},
};