方法不是观察者回调vuejs中的函数

Question

我正在用vueJS编写一个项目.我有一个包含以下代码的组件:

import ProjectsStore from './../stores/ProjectsStore.js';

export default {
    store: ProjectsStore,
    data () {
        return {
            loading: false,
            randomProject: null,
        }
    },
    computed: {
        projects () {
            return this.$store.state.projects;
        },
        commits () {
            return this.$store.state.commits;
        }
    },
    methods : {
        setCommit : ()=> {
            // code here
        }
    },
    watch: {
        projects: (value) => {
            this.setCommit()
        }
    },
    mounted () {
        this.$store.dispatch('loadProjectsList')
    }
}

我在项目中观察回调时出现以下错误:

this.setCommit is not a function

我放入一个console.log (this)回调函数,它显示一个默认对象而不是VueComponent.

我做错了什么？

谢谢你的帮助.

Answer 1

如果您理解特定代码片段的工作原理,那么更好的方法是更改​​语法并查看哪些有效,而不是试错.

如vue 文档中所述:

不要在实例属性上使用箭头函数(例如vm.$watch('a', newVal => this.myMethod())).由于箭头函数绑定到父上下文,因此它不会像您期望的那样是Vue实例,并且this.myMethod将是未定义的.

如果你是es6箭头函数的新手,这里对箭头函数的这个绑定有很好的解释.

一旦你明白了,那就没有更多的反复试验

希望我的回答对你有所帮助