vue中使用监听器(watch)需要注意的问题

本文是在该项目中踩坑得出的结论:

今天在自己写的vue项目中，由于路由跳转需要更改vuex状态中的title，因此监听了路由的path，下面是代码：

watch: {
    '$route.path': (newVal, oldVal) => {
        if (newVal == '/home') {
            this.updateHomeTitle();
        } else if (newVal == '/discovery') {
            this.updateDiscoveryTitle();
        } else if (newVal == '/collect') {
            this.updateCollectTitle();
        }
    }
},
methods: {
    updateHomeTitle() {
        this.$store.commit('UPDATE_TITLE', this.sHomeTitle);
    },
    updateDiscoveryTitle() {
        this.$store.commit('UPDATE_TITLE', this.sDiscoveryTitle);
    },
    updateCollectTitle() {
        this.$store.commit('UPDATE_TITLE', this.sCollectTitle);
    }
}

点击底部的tabBar的时候，一直报错：

后来经过查证后，发现尤大大在官方文档已经提及https://cn.vuejs.org/v2/api/#watch

注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

这就是问题所在了，this绑定的是上线文，而不是组件，所以才会找不到方法