Question

我正在构建一个使用Vuex的Vue 2 Webpack应用程序。我试图通过观察从Vuex商店获取数据的计算属性来更新组件的本地状态。这就是我的组件的<script></script>部分内部的样子：

export default {
    name: 'MyComponent',

    data() {
        return {
            // UI
            modal: {
            classes: {
                'modal__show-modal': false,
            },
            tags: [],
            },
        };
    },

    computed: {
        tagList() {
            return this.$store.getters.tagList;
        },
    },

    watch: {
        tagList: (updatedList) => {
            this.modal.tags = updatedList;
        },
    },
};

如您所见，我有一个名为tagList的计算属性，它从商店中获取数据。我有一个观察tagList的观察者，这样每当商店的数据发生变化时，我都可以将modal.tags更新为新值。

根据Vue documentation，我可以调用this.propertyName并更新我的本地组件状态，但是当我调用this.modal.tags = updatedList;时，我收到以下错误：

[Vue warn]: Error in callback for watcher "tagList": "TypeError: Cannot set property 'tags' of undefined"

为什么会出现此错误，即使它与Vue.js文档中的内容没有什么不同？

Answer 1

不要使用箭头功能。

更改自：

watch: {
    tagList: (updatedList) => {
        this.modal.tags = updatedList;
    },
},

要：

watch: {
    tagList(updatedList) {              // changed this line
        this.modal.tags = updatedList;
    },
},

Vue docs提到这个a few times：

不要使用arrow functions 在选项属性或回调上，例如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。由于箭头函数绑定到父上下文，this不会是您所期望的Vue实例，经常导致错误，例如
Uncaught TypeError: Cannot read property of undefined
或
Uncaught TypeError: this.myMethod is not a function

它基本上是一个上下文/范围问题。使用箭头函数时，this不引用Vue实例，而是引用组件声明的封闭上下文（可能是window）。

Answer 2

这是因为范围问题。您正在从其他上下文调用this.。因此，在箭头功能中，您无法访问vuejs数据。

我建议您将手表更改为：

tagList (updatedList) {
    this.modal.tags = updatedList;
},

VueJS：无法从观察者内部更新组件属性

2 个答案: