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

Question

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

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 模型进行修改。为什么？

Answer 1

虽然我仍然不太明白为什么，但似乎对 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 对象分配的哪一部分使它以这种方式工作。