“isExpiryComing”计算属性中的意外副作用答案

【问题标题】：Unexpected side effect in "isExpiryComing" computed property“isExpiryComing”计算属性中的意外副作用
【发布时间】：2020-12-29 20:26:30
【问题描述】：

如果nearExpiry 属性在 30 天范围内，我尝试将其设为 TRUE。但是我遇到了一个错误Unexpected side effect in "isExpiryComing" computed property，有什么办法可以克服这个问题吗？

我不确定如何在 isExpiryComing 计算属性中使用 slice。这个错误有什么解决方法吗？

<template>
    <div class="container wrapper d-flex flex-column justify-content-center align-items-center">
        <h1 class="text-info">Ingredients List</h1>

        <ingredients-list class="justify-content-center" 
            v-for="(ingredient,index) in sortedItems"
            :key="index" 
            :index='index' 
            :food-name="ingredient.food" 
            :food-expiry="ingredient.expiryDate"
            :is-expiry="isExpiryComing.nearExpiry"></ingredients-list>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                ingredients: [
                    {
                        food: 'CARROT',
                        expiryDate: '2020-12-12',
                        nearExpiry: false
                    },
                    {
                        food: 'PAPAYA',
                        expiryDate: '2018-1-15',
                        nearExpiry: false
                    },
                    {
                        food: 'ORANGE',
                        expiryDate: '2021-10-13',
                        nearExpiry: false
                    },
                    {
                        food: 'CHICKEN',
                        expiryDate: '2019-4-23',
                        nearExpiry: false
                    },
                    {
                        food: 'MEAT',
                        expiryDate: '2021-5-23',
                        nearExpiry: false
                    },

                ],

            }

        },
        computed: {
            sortedItems() {
                return this.ingredients.slice().sort((a, b) => {
                    return new Date(a.expiryDate) - new Date(b.expiryDate);
                });
            },
            isExpiryComing() {
                const now = new Date().getTime()
                const expiryDate = new Date(this.expiryDate).getTime()

                if (now - expiryDate > (30 * 24 * 60 * 60 * 1000)) {
                    this.nearExpiry = false
                } else {
                    this.nearExpiry = true
                }
                return this.nearExpiry
            }
        },
    }
</script>

【问题讨论】：

能否请您发布错误消息？
“isExpiryComing”计算属性 vue/no-side-effects-in-computed-properties 中的意外副作用
你在哪里定义nearExpiry？
这是因为您正在设置this.nearExpiry，这不是计算的用途（设置侧属性）。你会为此使用一种方法。为 nearExpiry 使用局部变量，而不是 this.nearExpiry。
我想设置一个条件，如果日期超过 30 天，nearExpiry 将变为 true，我该如何实现？

标签： vue.js

【解决方案1】：

这是因为您在计算属性中更改另一个变量 this.nearExpiry - 您的用例不需要它。

我假设您想检查 v-for 中每个产品的到期日期。我建议完全删除 isExpiryComing 并将 sortedItems 更改为：

                return this.ingredients
                    .slice()
                    .sort((a, b) => {
                        return new Date(a.expiryDate) - new Date(b.expiryDate)
                    })
                    .map((ingredient) => {
                        const now = new Date().getTime()
                        const expiryDate = new Date(ingredient.expiryDate).getTime()

                        return { ...ingredient, nearExpiry: now - expiryDate > 30 * 24 * 60 * 60 * 1000 }
                    })

将const now = new Date().getTime() 移到data() 也是一个好主意。

【讨论】：

...成分是什么意思？
最后一行基本上是：对于每次迭代，返回一个新对象，它包含所有当前的键：值对 ingredient （如food:'CARROT', expiryDate:'2020-12-12', nearExpiry:false）并添加新的nearExpiry 给他们。见：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案2】：

我看到的几个问题：

isExpiryComing 的范围是您当前的组件（例如 ingredients 和 sortedItems），而不是您的 v-for 的迭代（例如 ingredient 和 index）。
设置为this.nearExpiry = true 可能是导致错误的原因。计算属性应该是pure-functions，即它们不应该影响状态（通常情况不会如此，因为this 应该使用您使用的方法签名限定到函数，但这是 Vue 祝你好运坚持这一点）。如果你想影响状态，你应该使用watched property。（既然你只是返回 this.nearExpiry，为什么不把 nearExpiry 设为局部变量呢？）。

要修复错误，只需将 nearExpiry 设为局部变量而不是 vue-instance 变量 (this.nearExpiry)。但是，根据我的第一点，这可能也不是你想要的。可能将计算属性移动到您的 ingredients-list 组件。

【讨论】：