如何在计算属性被评估后执行某些代码？

Question

我有一个组件检查 URL 中的端点参数，然后从带有服务器的数组中找到包含所述参数的服务器。 每次评估服务器计算属性时，我都尝试执行此代码：

this.$store.dispatch('joinServer', this.server)
this.$store.commit('setSelectedServer', this.server)

我通过添加观察者来做到这一点。 每当路由 URL 更改时，计算的服务器属性也会更改，我观察这些更改并执行如下代码：

watch: {
    $route(to, from) {
        this.serverEndpoint = this.$route.params.endpoint
    },
    server(newServer){
        this.$store.dispatch('joinServer', newServer)
        this.$store.commit('setSelectedServer', newServer)
    }
}

问题是，对于我的代码，每当我第一次渲染组件时，代码都不会执行。 如果我更改 URL 端点，我的观察者就会生效并且代码会被执行。

所以我要问的是如何在我访问组件后第一次评估服务器计算属性后执行代码？

我的代码：

<script>
import ServerRooms from '../components/ServerRooms'
import Chat from '../components/Chat'
import Members from '../components/Members'

export default {
    components: {
        ServerRooms,
        Chat,
        Members
    },
    data(){
        return {
            serverEndpoint: this.$route.params.endpoint
        }
    },
    computed: {
        server(){
            return this.$store.state.servers.find((server) => {
                return server.endpoint == '/' + this.serverEndpoint
            })
        }
    },
    watch: {
        $route(to, from) {
            this.serverEndpoint = this.$route.params.endpoint
        },
        server(newServer){
            this.$store.dispatch('joinServer', newServer)
            this.$store.commit('setSelectedServer', newServer)
        }
    }
}
</script>

Answer 1

在定义观察者时尝试使用immediate关键字。 在手表上查看 vue 文档

回调将在观察开始后立即调用

例如

watch: {
    server: {
        handler(newServer){
            console.log('newServer = ' + newServer);
            this.$store.dispatch('joinServer', newServer)
            this.$store.commit('setSelectedServer', newServer)
        },
        immediate: true
    }
}