在 vueJs 中修改使用 Apollo GraphQL 获取的属性答案

【问题标题】：Modifying properties fetched with Apollo GraphQL in vueJs在 vueJs 中修改使用 Apollo GraphQL 获取的属性
【发布时间】：2018-12-14 00:15:45
【问题描述】：

我希望使用 javascript Moment 库格式化通过 Apollo-GraphQL 获取的日期。我在客户端使用 VueJS Apollo 来进行 graphQL 查询：

import { ALL_EVENTS } from '../constants/graphql.js'
import Event from './Event'
import moment from 'moment'

export default {
  name: 'EventList',
  data: () => ({
      events: [],
      loading: 0
    }),
  apollo: {
    events: ALL_EVENTS
  },
  components: {
    Event
  },

apollo 中间件返回一个包含 id、name、startDate（UTC 格式字符串）的对象列表和 endDate（也是 UTC 格式的字符串）属性，以及 apollo 添加的其他属性供其使用。

每当我尝试使用 Apollo 的对象列表在 VueJS 中创建一个计算属性时，它都会给我一个只读错误，但在我看来我正在创建一个新对象：

  computed: {
    eventsFormatted: function () {
      var out = this.events
      for (var i in out) {
        out[i].startDate = moment(out[i].startDate)
        out[i].endDate = moment(out[i].endDate)
      }
      return out
    }
  }

我需要做什么来复制我可以修改的数组？

【问题讨论】：

标签： javascript vue.js graphql apollo

【解决方案1】：

当您执行var out = this.events 时，out 变量现在指向与this.events 相同的对象数组。

因此，如果this.events 是只读的，则需要制作数组的副本，如果数组中的每个对象都是只读的，则还需要制作每个对象的副本。

这是一个使用spread operator 复制数组和对象的示例：

computed: {
  eventsFormatted() {
    let out = [...this.events];
    for (let i in out) {
      let item = {...out[i]};
      item.startDate = moment(item.startDate);
      item.endDate = moment(item.endDate);
      out[i] = item;
    }
    return out;
  }
}

上面对数组中的每个对象进行了浅拷贝。如果因为this.events、see this post的结构需要做深拷贝。

【讨论】：