Question

我是VueJ的新手，目前仅尝试加载一些数据并将其全局提供给所有vue组件。实现这一目标的最佳方法是什么？我有点停滞不前，因为全局变量有时似乎变成 null ，我不知道为什么。

在main.js中，我创建了三个全局Vue实例变量：

firewall-cmd --direct --add-rule ipv4 nat POSTROUTING 0 -s 10.8.0.0/24 ! -d 10.8.0.0/24 -j SNAT --to IP-ADDRESS

并在我的App.vue组件中加载所有数据：

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; }
    }
  }
})

但是，当我尝试访问<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>时，似乎有时是$clientConfiguration，我不知道为什么。例如，当我尝试构建导航侧栏时：

null

Answer 1

最可能的原因是null只是初始值。数据加载是异步的，因此您需要等待加载完成，然后再尝试创建任何依赖于该数据的组件。

您有一个isLoading标志，我想这是您在显示任何组件之前尝试等待加载完成的尝试（也许通过合适的v-if）。但是，它当前仅等待第一个请求，而不等待第二个。所以这个：

this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
  response2 => {
    this.$clientConfiguration = response2.data;
  }
);
this.isLoading = false;

必须是：

this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
  response2 => {
    this.$clientConfiguration = response2.data;
    this.isLoading = false;
  }
);

如果不是那个初始值就是问题，那么您需要弄清楚将其设置为null的原因。那应该很简单，只需在您的设置器中放置一个debugger语句：

$clientConfiguration: {
  get: function () { return globalData.$data.$clientConfiguration },
  set: function (newConfiguration) {
    if (!newConfiguration) {
      debugger;
    }
    globalData.$data.$clientConfiguration = newConfiguration;
  }
}

除了null的问题之外，如果您使用的是Vue 2.6+，我建议您看一下Vue.observable，这是创建反应式对象比创建新的Vue更为简单的方法实例。

就我个人而言，我可能会通过将反应性对象放在Vue.prototype上而不是使用全局混合来实现所有这些目的。假设您甚至需要对象是反应性的，如果不需要，那么这一切都比它需要的复杂。

VueJ中的全局加载数据有时为null

1 个答案: