VueJs 无法访问我创建的钩子之外的项目

Question

我正在尝试访问我在创建过程中加载的一些 JSON 数据，它会加载到我创建的挂钩中，但是当我尝试在创建的挂钩之外访问它时，它不会返回任何内容。执行“axios load”的控制台日志显示了我的 JSON，而内部安装则没有。有什么想法吗？

这是我的代码。

data(){
            return{
                dataset: "",
                baseUrl: process.env.VUE_APP_BASE_URL
            }

        },
created() {
            console.log('Mounted: base URL',this.baseUrl);
            axios.get(this.baseUrl + '/mockdata/piemock.json').then(response => {
                this.dataset =response.data;
                console.log('axios load', this.dataset);
            })
                .catch(e => {
                    console.log('axios error', e)
                });
        },
        mounted() {
            // define data
            console.log("this.dataset", this.dataset);
            console.log("this.baseurl", this.baseUrl);
}

更新 继续 AlexMA 在他的帖子中所说的内容，这里是新代码。控制台日志说 axios 被调用永远不会被调用？

data(){
            this.fakeAxiosCall()
                .then((theData) => (
                    console.log('axios called', theData),
                    this.dataset = theData
                ))
                .finally(() => (this.loading = false));
            return{
                dataset: "",
                baseUrl: process.env.VUE_APP_BASE_URL
            }

        },

methods: {
            fakeAxiosCall:  function() {
                return axios.get(this.baseUrl + '/mockdata/piemock.json')
            }
        },

更新 2（最终工作答案）

AlexMA 帮助我完成了 99% 的工作，当时它缺少 axios 内部的 return 语句，以及抛出 catch 以抛出错误。这是最终的代码。我给了他一张支票，让我能顺利到达那里。我不得不写出完整的 URL，因为我收到了这个奇怪的错误，其中 baseUrl 变量在 axios 中添加了一个路径，否则当我在该调用之外执行控制台日志时它没有添加。小问题，但除此之外这有效。

 data() {
            this.fakeAxiosCall()
                .then((theData) => (
                    this.data = theData
                ))
                .finally(() => (this.loading = false));
            return {
                data: "",
                loading: true,
                baseUrl: process.env.VUE_APP_BASE_URL
            }
        },
        methods: {
            fakeAxiosCall: function() {
                 return axios.get('http://localhost:8080/mockdata/piemock.json')
                    .then(result => { console.log(result); return result; })
                    .catch(error => { console.error(error); throw error; });
            }
        },

Answer 1

我想分享一些可能有用的示例代码，因为看起来您正在尝试根据数据准备好的时间进行 DOM 操作。希望它会有所帮助。这是注释“您确定需要避免创建组件而不是在加载数据之前隐藏组件的模板吗？”的一个示例。

var app = new Vue({
  el: "#app",
  data() {
    this.fakeAxiosCall()
      .then((theData) => (this.data = theData))
      .finally(() => (this.loading = false));
    return {
      data: "",
      loading: true
    };
  },
  methods: {
    fakeAxiosCall: function() {
      return new Promise((resolve) => {
         setTimeout(() => resolve("hello Vue"), 2000);
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="loading">Loading...</div>
  <div v-if="!loading">Data was loaded: "{{data}}"</div>
</div>