Vue.js 使用vue apollo创建编辑表单时避免缓存问题

我正在进行我的第一个vue apollo项目，我想知道创建编辑表单的最佳方法是什么。我似乎在网上找不到任何例子

现在我正在查询我的用户数据，如下所示：

export default {
  data() {
    return {
      user: {
        id: '',
        name: '',
        email: '',
      },
    }
  },
  apollo: {
    user: {
      query: USER_QUERY,
    },
  },
}

<form @submit.prevent="submitForm">
  <label>Name</label>
  <input type="text" v-model="user.name" />

  <label>Email</label>
  <input type="text" v-model="user.email" />

  <button type="submit">Submit</button>
  <button type="button" @click="cancel">Cancel</button>
</form>

用这样一个简单的形式：

export default {
  data() {
    return {
      user: {
        id: '',
        name: '',
        email: '',
      },
    }
  },
  apollo: {
    user: {
      query: USER_QUERY,
    },
  },
}

<form @submit.prevent="submitForm">
  <label>Name</label>
  <input type="text" v-model="user.name" />

  <label>Email</label>
  <input type="text" v-model="user.email" />

  <button type="submit">Submit</button>
  <button type="button" @click="cancel">Cancel</button>
</form>

名称
电子邮件
提交
取消

问题是，当我编辑表单并关闭它时，当我返回表单时，GraphQL缓存将返回我的编辑。这是因为我的输入直接绑定到使用v-model的GraphQL查询返回的对象。我可以想出两种方法来避免这种情况：

• 创建查询返回的数据的副本（称之为user和userData？），并将v-model绑定到该对象的键。但是，我需要创建一个重复的变量，并将数据放在两个地方，这让我很恼火
• 或者完全禁用此GraphQL查询的缓存

我觉得我错过了一个更明显的解决方案。当我使用RESTA时，有一个表单类处理基于以下内容的所有表单交互：

---

也许可以用类似的方法解决？使用Vue/Apollo/GraphQL构建（编辑）表单的首选方法是什么？

我只能告诉您我的首选方法。最基本的是我会做这样的事

UserForm.vue

<template>
<form @submit.prevent="submitForm">
  <label>Name</label>
  <input type="text" v-model="proposedName" />

  <button type="submit">Submit</button>
  <button type="button" @click="cancel">Cancel</button>
</form>
</template>

<script>
import MyUserQuery from '/wherever/MyUserQuery.gql'
import MyUserMutation from '/wherever/MyUserMutation.gql'

export default {
  data() {
    return: {
      proposedName: ''
    }
  },

  methods: {
    submitForm() {
      this.$apollo.mutate({
        mutation: MyUserMutation,
        variables: {
          name: this.proposedName
        }
      })

      this.proposedName = ''
    }
  },

  apollo: {
    user: {
      query: MyUserQuery,
      result({data}) {
        this.proposedName = data.user.name
      }
    }
  }
}
</script>

名称
提交
取消
从“/where/MyUserQuery.gql”导入MyUserQuery
从“/where/MyUserMutation.gql”导入MyUserMutation
导出默认值{
数据（）{
返回：{
建议名称：“”
}
},
方法：{
submitForm（）{
这是阿波罗，变异({
突变：MyUserMutation，
变量：{
名称：this.proposedName
}
})
this.proposedName=“”
}
},
阿波罗：{
用户：{
查询：MyUserQuery，
结果（{data}）{
this.proposedName=data.user.name
}
}
}
}

---

我的

proposedVariable

很冗长，但我发现它可以避免混淆表单数据和Apollo数据。我相信其他人也有其他的策略。

Javascript对象存储为引用。当您将对象分配给另一个变量时，您只是将对象的内存地址分配给该变量

因此，在结果对象中，应避免直接赋值，并使用JSON.parse，如：

---

谢谢，我最终选择了类似的方法！