为什么 getter 不是 return 值

Question

我有一个 getter 的 return 对象数组。问题是我需要不同组件中过去和实际的警告。

它 return 只是实际的警告而忽略了过去。但是当我删除 map 方法时它工作正常。

P.S 我试图将这个 getter 分成两个 getter

getPastOrActualWarnings: state => type => {
    const now = +new Date()
    let warnings
    if (type === 'actual') {
        warnings = state.warnings.filter(item => item.time * UNIX_TIMESTAMP > now)
    } else if (type === 'past') {
        warnings = state.warnings.filter(item => item.time * UNIX_TIMESTAMP < now)
    } else {
        warnings = []
    }

    return warnings.map(dateToString)
}

function dateToString (item) {
    item.time = new Date(item.time * UNIX_TIMESTAMP).toLocaleDateString('ru-RU', DATE_OPTIONS)
    return item
}

Answer 1

问题是您直接用 getter 修改状态，这是您永远不应该做的事情。以下行修改了您之前用于对项目进行排序的 item.time。 item 是对存储在状态中的对象的引用。

item.time = new Date(item.time * UNIX_TIMESTAMP).toLocaleDateString('ru-RU', DATE_OPTIONS)

要解决此问题，您可以执行以下两项操作之一：

为您的渲染时间使用不同的名称

item.renderedTime = new Date(item.time * UNIX_TIMESTAMP).toLocaleDateString('ru-RU', DATE_OPTIONS)

（浅）复制项目，这样你修改的是本地副本，而不是状态

function dateToString(item) {
  const localItem = { ...item };
  localItem.time = new Date(item.time * UNIX_TIMESTAMP).toLocaleDateString(
    "ru-RU"
  );
  return localItem;
}

为什么 getter 不是 return 值

Why does getter not return the value

javascript

vue.js

vuex

vuex-modules