Vue2 + Vuex 提交不提交（没有 Vue devtools）

Question

我正在尝试完成 Vuex 的基本任务，但由于某种原因它无法正常工作，在广泛搜索之后，我非常感谢任何帮助。

我想做什么：

用新的属性（对象）更新我商店中对象的列表（对象）。

怎么了：

在我什至从我的组件分派操作来提交新对象之前（我通过 mapActions 访问该操作），列表中任何现有对象的某些属性都会更新为绑定到 [=67 的值=] 在我的组件中。如我的代码所示，我知道与对象的反应性是一个问题，所以我根据文档使用 Vue.set(...) (Mutations Follow Vue's Reactivity Rules)

为什么我不认为我在做一些完全愚蠢的事情...（但我可能是错的）

当我检查 DevTools 中的变更时，变更按预期记录，当我按 "Commit"/"Commit All" 时，列表中的现有对象不再响应输入。这显然是我期望发生的行为，因为该操作实际上应该将更改提交给状态。然而，为什么它在代码中不起作用，而只能在开发工具中起作用？

我再次为这可能是一个基本问题道歉，但我看到其他一些人也有类似的问题，但没有关于我们遗漏的内容的书面解释...

初始状态

const state = {
  quotes: {}
}

变异

mutations: {
  [types.ADD_QUOTE] (state, payload) {
    Vue.set(state.quotes, payload.id, payload)
  }
}

动作

actions: {
  addQuote ({ commit }, payload) {
    commit(types.ADD_QUOTE, payload) 
  }    
}

组件

<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'
    ])
   }
  }

总而言之， 在开发工具中，我看到 id 和 price 的值在我设置为 state.quotes 的对象中发生变化 -在我的组件中，它们显然与 quote.price 和 quote.id 的 v 模型相关联。只有当我在 devtools 中 "Commit All" 时，这些对象的属性才会停止更改。为什么 commit 方法不在进行这些提交的操作中？

Answer 1

您落入了对象引用陷阱。引号是一个对象，它作为有效负载传递给操作。当您提交该负载时，它会将 reference 保存到您的状态中。

现在组件和商店都指向同一个对象。

解决方案是将输入复制到一个新对象中，使用扩展运算符或 Object.assign

始终在增变器中复制有效载荷（如果它是一个对象）通常是一个好习惯

function(state, payload){
  Vue.set(state.quotes, payload.id, {... payload });
}

Vue2 + Vuex 提交不提交（没有 Vue devtools）

Vue2 + Vuex Commit Not Committing (without Vue devtools)

vuejs2

vuex

vue-devtools