Question

我有不需要实时绑定的数据，并且来自远程来源。这是服务器由某些管理员生成的JSON文件，有时可能会更新。

我有一个Vue实例，我想将该数据用作自定义选项，以避免不必要的反应性绑定。

我无法导入构建中的.vue文件本身，因为每次服务器上的数据更改时都不会构建它。

如果我正在加载每个文件（store.json和main.js），则在这里有一个竞争条件，即在加载main.js时可能尚未加载数据，因此我的自定义选项为空。

有Vue模式可用于在存在某些数据之前不进行初始化吗？

尝试过：

export default {
  store: "", 
  mounted(){
    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function(){
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            this.store = JSON.parse(httpRequest.responseText);
            console.log(this.store) //shows the expected return, but obviously no update to the page
        }
    }
    httpRequest.open("GET", "/store.json", true);
    httpRequest.send();    
  }
};

Answer 1

我曾经有过类似的案例，需要调整一些预设，而不必每次都重建项目。我最终移动了在异步Axios函数中呈现应用程序的Vue对象。当然，它会影响加载时间，因为它会等待JSON文件加载，在我看来，这并不重要。这是这种设置的摘要。

axios.get('./config.json')
.then(function(response) {
    let config = response.data
    //commit data to vuex store for example

    new Vue({
        store,
        render: h => h(App)
    }).$mount('#app')
})
.catch(function(error) {
    console.log(error)
})

加载静态数据后初始化vue

1 个答案: