Vuex 状态随突变而变化 - apollo graphql 查询

问题描述

我有一个表单，用户可以在其中编辑对象 - 在我的例子中，是关于一个故事的元数据 - 在它从 GraphQL 加载之后。但是，当我使用我的 vue-router 守卫检查故事是否已更改时，故事状态始终是修改后的值。

Vuex story.js

...
  getters: {
    ...formSubmit.getters,getStory: (state) => {
     return  state.story},getEditedStory: (state) => state.editedStory,getStoryDescription: (state) => {
      return state.story.description
    }
  },mutations: {
    ...formSubmit.mutations,setStory(state,payload) { 
      state.story = payload 
    },setEditedStory(state,payload) { 
      state.editedStory = payload 
    }
  },...

表单组件

   export default {
   ...
   apollo: {
      story: {
        query: gql`query GetStory($id: ID!) {
          story(id: $id) {
            name
            summary
            description
          }
        }`,variables() {
          return {
            id: this.id
          }
        },result({ data}) {
          this.setText(data.story.description)
          this.setStory(data.story)
          this.setEditedStory(data.story)
        },}
    },...

在我的表单中，我用 v-model 映射了值：

    <v-text-field 
        v-model="story.name"
        class="mx-4"
        label="Add your title..."
        single-line
        :counter="TITLE_TEXT_MAX_LENGTH"
        outlined
        solo
        :disabled="updateOrLoadInProgress"
      />

但是，出于某种原因，每当我调用 this.getStory 时，它的值都会根据 v-model 进行相应修改。为什么？

解决方法

虽然我仍然不太明白为什么，似乎对 apollo 变量 story 的更改会影响 store.story 值，并使用突变来设置它们。

我已将初始设置器修改为如下所示：

          this.setText(data.story.description)
          let loadedStory = {
            name: data.story.name,description: data.story.description,summary: data.story.summary,}
          this.setStory(loadedStory)
          this.setEditedStory(data.story)
        },

这似乎阻止 state.story 跟随对 apollo 创建的 story 变量的更改。这似乎是意外的行为，我不太明白 javascript 对象分配的哪一部分使这种工作方式如此。