Vue2 Vuex提交未提交（不带Vue devtools）

Question

我正在努力完成Vuex的基本任务，但由于某种原因，它不起作用，在四处寻找后，我非常感谢任何帮助。

我想做的是：

使用新属性（对象）更新“我的存储”中对象的列表（对象）。

出了什么问题：

在我从我的组件分派动作以提交新对象之前（我正在通过mapActions访问该动作），列表中任何现有对象中的某些属性都会使用绑定到我的组件中的inputs/v-models的值进行更新。正如我下面的代码所示，我知道与对象的反应性是一个问题，所以我使用Vue。集合（…） 根据文档（突变遵循Vue的反应性规则）

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

当我在DevTools中检查突变时，突变按预期记录，当我按“提交”/“全部提交”时，列表中的现有对象不再响应输入中的更改。这显然是我期望发生的行为，因为动作实际上应该将更改提交给状态。但是为什么它不能在代码中工作，而只能在devtools中工作呢？

我再次为可能是一个基本问题道歉，但我看到其他一些人也有类似的问题，没有书面解释我们错过了什么...

初始状态

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

总之，在devtools中，我看到id和price的值在我设置为状态的对象中发生变化。quotes-它们显然与quote的v型车型有关。价格和报价。我的组件中的id。只有当我在devtools中“提交所有”时，这些对象的属性才会停止更改。为什么操作中的commit方法不进行这些提交？




Answer 1

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

现在，组件和存储都指向同一个对象。

解决方案是使用spread操作符或对象将输入复制到新对象中。分配

它通常是一个良好的做法，总是复制有效载荷在变异器（如果它是一个对象）

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