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(未找到)

编辑#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如果我做这样的事情它不会工作coz 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做的理解是不正确的.如果您阅读文档,它会说您传递给nextTick函数的回调将在下一次DOM更新后执行.

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

您的方案与DOM没有任何关系.

您有2个异步HTTP调用要一个接一个地执行,因为第二个依赖于第一个的结果.你的原始实现和第三个(EDIT#2)是不稳定的,因为在解除第二个请求之前你没有确保第一个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;
        });
}

第一个回调返回一个Promise结果被送入第二个then调用.我喜欢这种方法,因为它避免了嵌套thens.我还建议你阅读关于Promises的MDN文档.