vue.js - 在 Vue.js 中使用 computed 并且当 mounted 被调用时 computed 属性仍然是空的

Question

我是 Vue.js 的新手。我正在开发一个组件，当客户轮到时(前面没有其他客户)，该组件会在视频聊天中自动连接客户和销售代表。我需要通过调用函数 startMyVisit() 来激活第 3 方视频聊天软件。

以前，我在函数 startMyVisit() 的第一行中遇到错误 Error: visit argument is not of type MyCustomerVisit。我使用调试器在该行停止，this.getVisit 的值为 ''。我创建了一个手动调用 startMyVisit() 的按钮，它可以正常工作。所以，我的结论是我调用 startMyVisit() 的时间是错误的或不正确的。

我通过在 computed 属性 getVisit 上使用 watcher 并调用方法 startMyVisit( ) 当 getVisit 不为 null 或为空时。

当 computed 属性 getVisit 不为 null 或为空并且方法 startMyVisit() 被调用时，我得到一个error [Vue warn]: error in callback for watcher "getVisit": "ReferenceError: startMyVisit is not defined" 和 vue.runtime.esm.js?2b0e:1737 ReferenceError: startMyVisit is not已定义。

我已验证该方法的书写和拼写是否正确(使用复制和粘贴来验证它)。

我将不胜感激。

这是我的 waitingDetails.vue 组件的代码(最新):

<template>
    <div>
        <h1>
            Your video chat will start shortly...
        </h1>
        <br>
        <h2>
            Number of customers Ahead: {{numberOfCustomersAhead}}
        </h2>
        <br><br><br>
        <!-- <button color="error" v-on:click="startMyVisit">Start My Visit</button> -->
        <v-btn color="success" v-on:click="cancelVisit">Cancel My Video Chat</v-btn>
        <app-visit-info></app-visit-info>
    </div>
</template>

<script>
/* eslint-disable */
import visitInfo from './visitInfo';

export default {
    name: 'waitingDetails',
    components:{
        'app-visit-info': visitInfo
    },
    created(){
        console.log('created() calling method "startMyVisit()"');
        this.startMyVisit();
    },
    mounted(){
        console.log('mounted() calling method "startMyVisit()"');
        this.startMyVisit();
    },
    computed:{
        numberOfCustomersAhead(){
            return this.$store.state.visit.numberOfCustomersAhead;
        },
        getSdk(){
            return this.$store.state.sdk;
        },
        getVisit(){
            console.log('computed: getVisit');
            return this.$store.state.visit;
        }                      
    },
    watch: {
        getVisit: function(){
            if (this.getVisit !== null && this.getVisit !== '') {
                console.log('watch: getVisit !== null and is not empty!');
                startMyVisit();
            } else {
                console.log('watch: getVisit is NULL or is EMPTY');
            }
        }
    },
    methods:{
        startMyVisit(){
            if (this.getVisit !== null && this.getVisit !== '') {
                this.getSdk.visitService.launchVisitVideoChat(this.getVisit) 
                    .then((videoChatLaunched) => {
                if(videoChatLaunched !== true){
                    throw Error('problem launching the visit video chat');
                } else {
                    console.log("Visit Video Chat Launched Successfully !");
                }
                return this.getSdk.visitService.waitForVideoToStart(this.getVisit);
                }).then((visit) => {
                    this.$store.commit('setVisit', visit);
                    console.log('waitForVideoToStart... promise-->',visit);
                    return this.getSdk.visitService.waitForRepresentativeToJoinVisit(visit);
                }).then((updatedVisit) => {
                    this.$store.commit('setVisit', updatedVisit);
                    console.log('waitForRepresentativeToJoinVisit... promise-->',updatedVisit);
                    console.log('customers ahead', updatedVisit.customersAheadOfYou);
                    this.customersAheadOfYou = updatedVisit.customersAheadOfYou;
                    return this.getSdk.visitService.updateConnectionStatus(updatedVisit);
                }).then((visit) => {
                    this.$store.commit('setVisit', visit);
                    console.log('updateConnectionStatus... promise-->', visit);
                    return this.getSdk.visitService.waitForVisitToFinish(visit);
                }).then((visit) => {
                    this.$store.commit('setVisit', visit);
                    console.log('Visit has ended. waitForVisitToFinish... promise-->', visit);
                    return;
                });
            } else {
                console.log('startMyVisit() --> this.getVisit === null or is empty');
            }
        },
        cancelVisit(){
            this.getSdk.visitService.cancelVisit(this.getVisit)
            .then((visit) => {
                console.log('Cancel visit.. promise-->',visit);
            });
        }        
    }
}
</script>

Answer 1

我认为您可能有一个小错字导致了这个问题。在你的观察者中你有这段代码:

if (this.getVisit !== null && this.getVisit !== '') {
  console.log('watch: getVisit !== null and is not empty!');
  startMyVisit();
} else {
  console.log('watch: getVisit is NULL or is EMPTY');
}

但我认为您需要将 startMyVisit(); 更改为 this.startMyVisit();。