Vue2 + Vuex Commit Not Committing（没有 Vue devtools）

Posted 2023-04-13

【中文标题】Vue2 + Vuex Commit Not Committing（没有 Vue devtools）

【英文标题】：Vue2 + Vuex Commit Not Committing (without Vue devtools)

【发布时间】：2018-06-02 07:10:15

【问题描述】：

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

我想做的事：

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

出了什么问题：

在我什至分派操作以从我的组件提交新对象之前（我正在通过 mapActions 访问操作），列表中任何现有对象中的某些属性都会使用与输入/v-models 相关联的值进行更新在我的组件中。正如我的代码在下面显示的，我知道对对象的反应是一个问题，所以我根据文档使用Vue.set(...) (Mutations Follow Vue's Reactivity Rules)

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

当我在 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 的值在我设置为 state.quotes 的对象中发生变化 - 它们显然与 v-model 相关联quote.price 和 quote.id 在我的组件中。只有当我在 devtools 中“全部提交”时，这些对象的属性才会停止更改。为什么进行这些提交的操作中没有 commit 方法？

【问题讨论】：

这是一个相关问题，似乎没有相同的潜在问题：***.com/questions/42294030/…

这里的代码看起来非常好。但是，我不明白 what 出了什么问题。它似乎发生在其他一些组件中？更新了什么？

谢谢@dube！在我注意到你的评论之前，我只是做了一个总结。最简短的答案是状态正在根据组件输入中的任何值而变化。只有 devtools 中的“Commit All”似乎“锁定”了状态。

【参考方案1】：

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

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

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

始终将有效负载复制到 mutators 中通常是一个好习惯（如果它是一个对象）

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

【讨论】：

我现在明白了——谢谢！所以我也会查看 devtools 文档，但可以肯定的是，它在没有扩展运算符的情况下处理突变的唯一原因是因为它正在做一些事情来拍摄状态快照以提供“时间旅行”？

我想是的，是的。如果发生这种情况，使用严格模式（仅用于开发！）会引发异常。查看文档，（抱歉，我无法在手机应用上链接它们）

BTW ImmutableJS 和类似的库之所以受欢迎，正是出于这个原因：它们阻止您更改您不想更改的内容