如何解决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 对象分配的哪一部分使这种工作方式如此。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。