本文是在该项目中踩坑得出的结论:
今天在自己写的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绑定的是上线文，而不是组件，所以才会找不到方法
