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

我试图访问我在创建期间加载的一些JSON数据，它加载在我创建的钩子中，但当我尝试在创建的钩子之外访问它时，它不会返回任何内容。执行“axios加载”的控制台日志显示我的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; });
            }
        },

---

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

var app=新的Vue{ el:应用程序， 资料{ 这是假的 .thentheData=>this.data=theData .finally=>this.loading=false； 返回{ 数据：， 加载：正确 }; }, 方法：{ fakeAxiosCall：函数{ 返回新PromiseSolve=>{ setTimeout=>resolvehello Vue，2000； }; } } }; 加载。。。 已加载数据：{Data}

---

axios调用是异步的，因此它的承诺在调用挂载的钩子时还没有得到解决。你应该能够从日志记录的顺序中看到这一点。啊，好的，这很有意义。有什么方法可以加载JSON文件吗？如果必须在安装此组件之前加载JSON文件，那么您需要从外部加载它，并且仅在数据可用时创建组件。如果要将加载保持在此组件内，则需要处理初始渲染期间不可用的数据。好的，这很有意义，我必须研究如何将整个JSON数据树传递给组件，以便在创建组件之前创建JSON。是否确实需要避免创建组件。在加载数据之前隐藏组件的模板？组件中是否也存在fakeAxiosCall常量？是的，我正在尝试创建一个D3JS饼图组件，它可以存在于任何地方，我只是把它作为组件外部的常量作为一个例子。如果感觉更好的话，可以将其移动到methods块中并调用this.fakeaxioCall。在大型应用程序中，它可能位于模型层的某个位置，可能是普通javascript文件、vuex或其他模型层库。不过，这取决于你喜欢如何构造你的应用程序。好吧，我对代码做了一些调整，但现在遇到了一个不同的问题，请参阅在你的应用程序中，它可能类似于fakeAxiosCall:function{return axios.getthis.baseUrl+'/mockdata/piemock.json'}。但是它不需要被称为伪代码，当然你的代码看起来很好。请参阅及。SO不适用于扩展调试帮助会话，因此，如果您在程序中发现无法解决的特定错误，请打开一个新问题。