Question

我正在使用VueJS构建应用程序，我正在使用Apollo客户端通过GrapgQL服务器从数据库中获取数据。我的代码看起来像这样：

    apollo.query({
        query,
        variables
    })
    // context.commit('populateComments', payload) triggers the mutation
    .then(payload => context.commit('populateComments', payload))

然后，在我的突变中，我有以下

    populateComments: (state, payload) => { 
        state.comments = payload.data.comments
    }

当我尝试将另一个对象推入另一个突变的comments数组时，我收到一条错误，上面写着“无法添加属性300，对象不可扩展”。我发现以下工作

state.comments = Array.from(payload.data.comments)

但是......我不确定反复复制像这样的大型数组有多有效？这是首选的方法吗？

Answer 1

我自己没有使用GraphQL / Apollo，但我想它会坚持不改变数据的原则，因此对象不可扩展。您可以在突变中做的是将数据分配到以下状态：

Vue.set(state, 'comments', payload.data.comments)

这将确保对象最初被深度复制，然后以Vue友好的方式更新，以支持反应性。您可以阅读更多here。

Answer 2

我遇到了同样的问题。

我最终做的是在将数据发送到Vue提交之前执行_.cloneDeep。

Answer 3

这应该有效：

const commentsClone = [...payload.data.comments];

为什么Apollo / GraphQL返回一个不可扩展的对象？

3 个答案: