Vue2 + Vuex 提交不提交(没有 Vue devtools) [英] Vue2 + Vuex Commit Not Committing (without Vue devtools)
问题描述
我正在尝试使用 Vuex 完成应该是一项基本任务，但由于某种原因它不起作用，经过广泛搜索后，我非常感谢您的帮助.
我想要做什么:
使用新属性(对象)更新我商店中对象的列表(对象).
出了什么问题:
在我什至调度操作以从我的组件提交新对象之前(我正在通过 mapActions 访问操作)，列表中任何现有对象中的某些属性都会更新为与输入/v-models 相关的值在我的组件中.正如我的代码如下所示，我知道对象的反应性是一个问题，所以我根据文档使用 Vue.set(...) (突变遵循 Vue 的反应性规则)
为什么我不认为我在做一些完全愚蠢的事情...(但可能是错的)
当我在 DevTools 中检查突变时，突变按预期记录，当我按下提交"/提交全部"时，列表中的现有对象不再响应输入的更改.鉴于该操作实际上应该将更改提交给状态，这显然是我期望发生的行为.但是为什么它不能在代码中工作，而只能在开发工具中工作?
我再次为可能是基本问题而道歉，但我看到其他一些人也有类似问题，但没有书面解释我们遗漏了什么......
初始状态
const state = {引号: {}}突变
突变:{[types.ADD_QUOTE](状态，有效载荷){Vue.set(state.quotes,payload.id,payload)}}行动
动作:{addQuote ({ commit }, 有效负载) {提交(types.ADD_QUOTE，有效载荷)}}组件
<div class="quote-block"><标签>价格</标签><input type="text" v-model="quote.price"><label>id</label><input type="text" v-model="quote.id"><!-- 只显示下面的道具--><div>{{quote.item}}</div><div>{{quote.vendor}}</div><div>数量:{{quote.qty}}</div><button @click="addQuote(quote)">提交报价</button></模板><脚本>从 'vuex' 导入 { mapActions }导出默认{道具: {供应商:字符串，项目:字符串，数量:数量},数据 () {返回 {引用: {ID: ''，价钱: ''，时间戳:Date.now(),供应商:this.vendor，项目:this.item，数量: this.qty}}},方法: {...mapActions(['添加引用'])}}
总而言之，在 devtools 中，我看到 id 和 price 的值在我设置为 state 的对象中发生变化.报价 - 它们显然与我的组件中 quote.price 和 quote.id 的 v 模型相关联.只有当我在 devtools 中全部提交"时，这些对象的属性才会停止更改.为什么操作中的 commit 方法没有进行这些提交?
您落入了对象引用陷阱.引用是一个对象，它作为有效负载传递给操作.当您提交该负载时，它会将引用保存到您的状态中.
现在组件和商店都指向同一个对象.
解决方案是将输入复制到一个新对象中，使用扩展运算符或Object.assign
总是在mutators中复制payload通常是一个好习惯(如果它是一个对象)
function(state, payload){Vue.set(state.quotes, payload.id, {... payload });}I'm trying to accomplish what should be a basic task with Vuex, but for some reason it's not working, and after searching far and wide, I greatly appreciate any help.
What I'm trying to do:
Update a list (object) of objects in my store with a new property (object).
What's going wrong:
Before I even dispatch the action to commit the new object from my component (I'm accessing the action via mapActions), certain properties in any existing objects in the list are updated with the values tied to the inputs/v-models in my component. As my code shows below, I know reactivity with objects is an issue, so I'm using Vue.set(...) per the docs (Mutations Follow Vue's Reactivity Rules)
Why I don't think I'm doing something completely stupid...(but am probably wrong)
When I check on the mutation in DevTools, the mutation is logged as expected, and when I press "Commit"/"Commit All", the existing objects in my list no longer respond to changes in the inputs. This is obviously the behavior I expect to occur given that the action is literally supposed to commit the change to the state. Yet why does it not work within the code, and only within the devtools?
I apologize again for what is probably a basic issue, but I've seen a few others with a similar issue and no written explanation as to what we're missing...
Initial State
const state = {
quotes: {}
}
Mutation
mutations: {
[types.ADD_QUOTE] (state, payload) {
Vue.set(state.quotes, payload.id, payload)
}
}
Action
actions: {
addQuote ({ commit }, payload) {
commit(types.ADD_QUOTE, payload)
}
}
Component
<template>
<div class="quote-block">
<label>price</label>
<input type="text" v-model="quote.price">
<label>id</label>
<input type="text" v-model="quote.id">
<!-- Just displaying props below -->
<div>{{ quote.item }}</div>
<div>{{ quote.vendor }}</div>
<div>Qty: {{ quote.qty }}</div>
<button @click="addQuote(quote)">Submit quote</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
props: {
vendor: String,
item: String,
qty: Number
},
data () {
return {
quote: {
id: '',
price: '',
timestamp: Date.now(),
vendor: this.vendor,
item: this.item,
qty: this.qty
}
}
},
methods: {
...mapActions([
'addQuote'
])
}
}
To summarize, within the devtools, I see values for id and price changing within objects that I set to state.quotes - they're apparently tied to the v-models for quote.price and quote.id within my component. It's only when I "Commit All" within devtools that the properties for those objects stop changing. Why isn't the commit method within the action making these commits?
You fell into the object reference trap. The quote is an object, which is passed to the action as the payload. When you commit that payload, it saves the reference into your state.
Now both the component and the store point to the same object.
The solution is to copy the input into a new object, either with the spread operator or Object.assign
Its generally a good practice to always copy the payload in mutators (if it is an object)
function(state, payload){
Vue.set(state.quotes, payload.id, {... payload });
}
这篇关于Vue2 + Vuex 提交不提交(没有 Vue devtools)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
