Question

我正在docs中指示商店模式。

这是我的商店对象：

import Vue from 'vue';
import _ from 'lodash';

class EmployeeService {

  constructor() {
    this.employees = null;
    this.url = 'http://url';
  }

  all() {
    if (this.employees === null) {
      return Vue.http.get(this.url)
        .then(response => (this.employees = response.data.data));
    }

    return new Promise(resolve => resolve(this.employees));
  }

  find(id) {
    const employee = _.find(this.employees, { id });

     if (_.isUndefined(employee)) {
       return Vue.http.get(`${this.url}/${id}`)
         .then(response => response.data);
     }

    return new Promise(resolve => resolve(employee));
  }

}

export default new EmployeeService();

问题在于find(id)方法，每当我使用lodash函数_.find()时，始终返回undefined，即使对象确实存在。但是当我使用vanilla js时，就像这样：

const employee = this.employees.flter(emp => emp.id == id)[0];

找到对象没有问题。

我想知道为什么会发生这种情况，并发现它是一个错误还是预期的行为。

Answer 1

Vue.js没有问题。但它在你的_.find。正如lodash docs _find所说：

迭代集合的元素，返回第一个元素谓词返回truthy for。

在您的代码_.find(this.employees, { id });中，{ id }不会返回真值。对于谓词参数，您应该使用

function(o) {
    return o.id == id;
}

或简写：{'id': id}。

Vue.js数据对象不适用于某些lodash函数？

1 个答案: