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

Posted 2023-03-10

【中文标题】Vuex 状态随突变而变化 - apollo graphql 查询

【英文标题】：Vuex state changing with mutation - apollo graphql query

【发布时间】：2021-07-05 15:42:21

【问题描述】：

我有一个表单，用户在从 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 进行相应修改。为什么？

【参考方案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 跟踪对阿波罗创建的 story 变量的更改。这似乎是意料之外的行为，我不太明白 javascript 对象分配的哪一部分使这项工作如此工作。