异步组件中异步响应数据的使用
Usage of asynchronous response data in asynchronous components
下面是父组件和子组件
在此处输入代码
export default {
name : 'parentNode',
mounted: function () {
var that = this;
if (that.$store.state.auth.isAuthenticated) {
that.$store.dispatch(ActionsType.GET_ALLCOINLIST).then(function (data) {
// I want to use this store data in child components.
that.$store.state.main.data = data;
});
}
},
};
export default {
name : 'childNode',
data : function(){
return {
childData : {}
}
},
mounted : function(){
//How should I check if the data is loaded or not?
},
computed : {
childData : function(){
return this.$store.state.main.data;
}
},
watch : {
childData : function(){
this.makeChart();
}
},
methods : {
makeChart : function(){
console.log('this function make a chart.');
}
}
}
我想在 $store(vuex) 数据变化时绘制一个新图表。
但是,由于此数据的响应是异步的,因此当子组件加载时,它可能已经或可能没有收到数据(在父组件中)。
我总是想用最初加载子组件时收到的数据绘制图表。 vue的组件也是异步加载的,那么这种情况下,怎么控制呢?截至目前,如果最初加载子组件,则可能会或可能不会绘制图表。
期待vue高手的解答。
谢谢。
您可以使用 mapState()
and watch()
:
import Vue from "https://cdn.skypack.dev/vue@2.6.14";
import * as vuex from "https://cdn.skypack.dev/vuex@3.6.2";
Vue.use(vuex)
var store = new vuex.Store({
state: {
count: 1,
isLoaded: false, // mutate that when async call is finished
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
init() {
setInterval(() => this.commit('increment'), 1000) // replace this with async call and mutate isLoaded in then()
}
}
});
var app = new Vue({
el: '#app',
store,
data() {
return {
}
}, computed: {
...vuex.mapState([
'count'
]),
},
watch: {
count() {
console.log('watch count', this.count)
}
},
mounted() {
this.$store.dispatch('init')
}
})
下面是父组件和子组件 在此处输入代码
export default {
name : 'parentNode',
mounted: function () {
var that = this;
if (that.$store.state.auth.isAuthenticated) {
that.$store.dispatch(ActionsType.GET_ALLCOINLIST).then(function (data) {
// I want to use this store data in child components.
that.$store.state.main.data = data;
});
}
},
};
export default {
name : 'childNode',
data : function(){
return {
childData : {}
}
},
mounted : function(){
//How should I check if the data is loaded or not?
},
computed : {
childData : function(){
return this.$store.state.main.data;
}
},
watch : {
childData : function(){
this.makeChart();
}
},
methods : {
makeChart : function(){
console.log('this function make a chart.');
}
}
}
我想在 $store(vuex) 数据变化时绘制一个新图表。 但是,由于此数据的响应是异步的,因此当子组件加载时,它可能已经或可能没有收到数据(在父组件中)。 我总是想用最初加载子组件时收到的数据绘制图表。 vue的组件也是异步加载的,那么这种情况下,怎么控制呢?截至目前,如果最初加载子组件,则可能会或可能不会绘制图表。 期待vue高手的解答。 谢谢。
您可以使用 mapState()
and watch()
:
import Vue from "https://cdn.skypack.dev/vue@2.6.14";
import * as vuex from "https://cdn.skypack.dev/vuex@3.6.2";
Vue.use(vuex)
var store = new vuex.Store({
state: {
count: 1,
isLoaded: false, // mutate that when async call is finished
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
init() {
setInterval(() => this.commit('increment'), 1000) // replace this with async call and mutate isLoaded in then()
}
}
});
var app = new Vue({
el: '#app',
store,
data() {
return {
}
}, computed: {
...vuex.mapState([
'count'
]),
},
watch: {
count() {
console.log('watch count', this.count)
}
},
mounted() {
this.$store.dispatch('init')
}
})