Question

在VueJS中，我有一个vuex存储获取器，它可能会引发ErrorOne或ErrorTwo类型的错误。

// myGetter.js
export class ErrorOne extends Error {}
export class ErrorTwo extends Error {}

export default () => {
    if (...) {
        throw new ErrorOne()
    }
    if (...) {
        throw new ErrorTwo()
    }
    return ...
}

在Vue组件的计算属性中，我正在使用此吸气剂，但我想在try catch块中处理这些错误。

// MyComponent.vue
import { ErrorOne, ErrorTwo } from '.../myGetter'

export default {
    ...,
    data() {
        return {
            errorOne: false,
            errorTwo: false
        }
    },
    computed: {
        myGetterComputed() {
            try {
                const value = this.$store.getters['.../myGetter']
                this.errorOne = false            // Unexpected side effect
                this.errorTwo = false            // Unexpected side effect
                return value
            } catch (err) {
                switch (err.constructor) {
                    case ErrorOne:
                        this.errorOne = true     // Unexpected side effect
                        break
                    case ErrorTwo:
                        this.errorTwo = true     // Unexpected side effect
                        break
                 }
             }
         }
    }

}

但是埃斯林特告诉我[eslint] Unexpected side effect in "myComputedGetter" computed property. [vue/no-side-effects-in-computed-properties]。

在我的用例中，处理Vue计算属性错误的正确方法是什么？

我应该将myGetterComputed移至数据并使用watch方法来处理更新吗？

Answer 1

如果我直接回答您的问题，我可以告诉您eslint正在使用this rule来警告您有关意想不到的副作用。根据eslint-plugin-vue文档

在计算属性中引入副作用被认为是非常不好的做法。它使代码不可预测且难以理解。

基本上，我们需要记住的是，当在模板中处理数据的逻辑涉及大量逻辑时，应使用计算属性。因此，您不应该在已计算的属性逻辑中更新任何属性/数据。

如果您提供了您要达到的目标的更详细的示例，我想进一步帮助您

在Vue中捕获计算属性中的错误

1 个答案: