Vue 2 关于 nextTick

Question

我读到 nextTick 允许在下一个动作中执行代码。但这在我的代码中不起作用，有人可以帮助我吗？请纠正我。谢谢。

.vue

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        Vue.nextTick(()=>{
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

{{user.id}} 确实有效。这给了我以下错误：

GET http://localhost:8000/getShop/undefined 404 (Not Found)

编辑#1 如果我这样做，它会起作用，但在我看来，这不应该是正确的做法。

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

编辑#2 如果我这样做是行不通的，因为 vm.user.id 没有设置。

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
          vm.shop = response.data.data.shop
        })
      },
}
.....

Answer 1

我认为您对 nextTick 的理解不正确。如果您阅读 documentation，它表示您传递给 nextTick 函数的回调将在下一次 DOM 更新后执行。

假设您有一个属性，它使用 v-if 指令确定 DOM 中是否存在某个元素。如果你改变属性的值使得元素存在于 DOM 中，你可能必须等待 Vue 处理更改并更新 DOM 才能获取引用例如，那个元素。在这种情况下，您应该使用 Vue.nextTick 来确保在您想要查询 DOM 以获取该元素时，它确实存在。

您的场景与DOM没有任何关系。

您有 2 个异步 HTTP 调用要一个接一个地执行，因为第二个依赖于第一个的结果。您的原始实现和第三个（EDIT#2）是不稳定的，因为您在触发第二个 HTTP 请求之前没有确保第一个 HTTP 请求已完成，这解释了为什么您会收到有关 vm.user.id 未设置的错误。

您的第二个实现（编辑#1）更正确，因为第二个 HTTP 请求是在第一个 HTTP 请求完成后触发的。尽管如此，我还是建议进行一些小修改：

getUserInfo() {
    vm.$http.get('/getAuthUser')
        .then(response => {
            vm.user = response.data;

            return vm.$http.get('/getShop/' + vm.user.id);
        }).then(response => {
            vm.shop = response.data.data.shop;
        });
}

第一个回调 returns 一个 Promise 结果被送入第二个 then 调用。我喜欢这种方法，因为它避免了嵌套 thens。我还建议您阅读 MDN docs on Promises.

Vue 2 关于 nextTick

Vue 2 About nextTick

vuejs2