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

Posted 2023-02-23

【中文标题】在 Vue 中捕获计算属性中的错误

【英文标题】：Catching errors in computed properties in Vue

【发布时间】：2019-06-11 04:54:56

【问题描述】：

在 VueJS 中，我有一个 vuex 存储 getter，它可能会抛出 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 组件的计算属性中，我正在使用这个 getter，但我想在 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 告诉我 [eslint] Unexpected side effect in "myComputedGetter" computed property. [vue/no-side-effects-in-computed-properties]。

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

我应该将myGetterComputed 移动到数据并使用监视方法来处理更新吗？

【问题讨论】：

这里的副作用是您在 computed 属性中分配值。 computed 应该做一些计算或转换和return 结果。您应该将整个 myGetterComputed 移动到方法中（并重命名）

【参考方案1】：

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

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

基本上，我们需要记住的是，当我们如何处理模板中的数据时，需要使用计算属性。所以你不应该更新计算属性逻辑中的任何属性/数据。

如果您提供更详细的示例来说明您正在尝试实现的目标，我想进一步帮助您

【讨论】：

啊，好吧，所以 eslint 只是试图防止意外错误的发生，即使这样做可能没有问题，如果它是故意的。我现在没有时间提供一个独立的完整示例，但我的用例是一个名为 marketOrderPrice 的 getter，它返回可能的市场订单的市场价格并返回两个可能的错误：InsufficientMarketError 或 @ 987654324@

一个非常简单的解决方案是，如果我可以在观察者中捕获错误，但我认为这在 Vue 中是不可能的

@Acidic 您可以在 vue 观察程序中使用 try catch，因为它只是一个函数处理程序。此外，您可以在组件内设置一个方法作为观察者的处理程序。