Javascript VueJs中的全局加载数据偶尔为空
我是VueJs新手,目前正在尝试只加载一次某些数据,并使其对所有vue组件全局可用。实现这一目标的最佳方式是什么? 我有点卡住了,因为全局变量偶尔会变成null,我不知道为什么 在my main.js中,我创建了三个全局Vue实例变量:Javascript VueJs中的全局加载数据偶尔为空,javascript,vue.js,vuejs2,vue-mixin,Javascript,Vue.js,Vuejs2,Vue Mixin,我是VueJs新手,目前正在尝试只加载一次某些数据,并使其对所有vue组件全局可用。实现这一目标的最佳方式是什么? 我有点卡住了,因为全局变量偶尔会变成null,我不知道为什么 在my main.js中,我创建了三个全局Vue实例变量: let globalData = new Vue({ data: { $serviceDiscoveryUrl: 'http://localhost:40000/api/v1', $serviceCollection: null, $
let globalData = new Vue({
data: {
$serviceDiscoveryUrl: 'http://localhost:40000/api/v1',
$serviceCollection: null,
$clientConfiguration: null
}
});
Vue.mixin({
computed: {
$serviceDiscoveryUrl: {
get: function () { return globalData.$data.$serviceDiscoveryUrl },
set: function (newUrl) { globalData.$data.$serviceDiscoveryUrl = newUrl; }
},
$serviceCollection: {
get: function () { return globalData.$data.$serviceCollection },
set: function (newCollection) { globalData.$data.$serviceCollection = newCollection; }
},
$clientConfiguration: {
get: function () { return globalData.$data.$clientConfiguration },
set: function (newConfiguration) { globalData.$data.$clientConfiguration = newConfiguration; }
}
}
})
在我的App.vue组件中,我加载所有数据:
<script>
export default {
name: 'app',
data: function () {
return {
isLoading: true,
isError: false
};
},
methods: {
loadAllData: function () {
this.$axios.get(this.$serviceDiscoveryUrl)
.then(
response => {
this.$serviceCollection = response.data;
let configurationService = this.$serviceCollection.services.find(obj => obj.key == "ProcessConfigurationService");
this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
response2 => {
this.$clientConfiguration = response2.data;
}
);
this.isLoading = false;
})
}
},
created: function m() {
this.loadAllData();
}
}
</script>
最可能的原因是空值只是初始值。加载数据是异步的,因此在尝试创建依赖该数据的任何组件之前,您需要等待加载完成 您有一个isLoading标志,我猜这是您试图等待加载完成,然后通过合适的v-if显示任何组件。但是,它当前只等待第一个请求,而不等待第二个请求。因此: 这是。$axios.getconfigurationService.address+/api/v1/clientConfiguration.then 响应2=>{ 此.$clientConfiguration=response2.data; } ; this.isLoading=false; 需要: 这是。$axios.getconfigurationService.address+/api/v1/clientConfiguration.then 响应2=>{ 此.$clientConfiguration=response2.data; this.isLoading=false; } ; 如果问题不是初始值,那么您需要弄清楚是什么将其设置为null。这应该很简单,只需在setter中放入一条调试器语句: $clientConfiguration:{ get:函数{return globalData.$data.$clientConfiguration}, set:函数newConfiguration{ 如果!新配置{ 调试器; } globalData.$data.$clientConfiguration=newConfiguration; } } 除了空值问题之外,如果您使用的是Vue 2.6+,我建议您看看Vue.observable,这是一种比创建新Vue实例更简单的创建反应对象的方法
就我个人而言,我可能会通过在Vue.prototype上放置一个反应对象来实现所有这些,而不是使用全局混合。这假设您甚至需要对象是被动的,如果您不需要,那么这一切都比它需要的更复杂。为什么不将globalData放入全局混合中?我无法让它与全局混合中的数据一起工作。这是我唯一能想到的解决办法。
beforeMount: function () {
let $ = JQuery;
let clients = [];
if (this.$clientConfiguration === null)
console.error("client config is <null>");
$.each(this.$clientConfiguration, function (key, clientValue) {
let processes = [];
$.each(clientValue.processConfigurations, function (k, processValue) {
processes.push(
{
name: processValue.name,
url: '/process/' + processValue.id,
icon: 'fal fa-project-diagram'
});
});
clients.push(
{
name: clientValue.name,
url: '/client/' + clientValue.id,
icon: 'fal fa-building',
children: processes
});
});
this.nav.find(obj => obj.name == 'Processes').children = clients;