Изменение состояния Vuex с мутацией - запрос apollo graphql
У меня есть форма, в которой пользователь редактирует объект - в моем случае метаданные истории - после ее загрузки из 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-моделью. Почему?
Ответы 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, созданной apollo. Это кажется неожиданным поведением, и я не совсем понимаю, какая часть назначения объекта javascript заставляет это работать таким образом.