Vue2 + Vuex Commit Not Commit（Vue devtoolsなし）

Question

私はVuexの基本的な作業を達成しようとしていますが、何らかの理由でそれが機能していないため、遠くに検索した後、

私はをやろうとしている何

：

新しいプロパティ（オブジェクト）と私の店でのオブジェクトのリスト（オブジェクト）を更新します。間違って何が起こっている

：

私も（私はmapActions経由アクションにアクセスしています）私のコンポーネントから新しいオブジェクトをコミットするアクションを派遣する前に、リスト内の既存のオブジェクト内の特定のプロパティが更新されます私のコンポーネントの入力/ vモデルに結び付けられた値を使用します。私のコードは、以下に示すように、私は、オブジェクトとの反応性が問題である知っているので、私は、私は完全に愚かな何かをやっているとは思わないのはなぜドキュメントあたりVue.set(...)（Mutations Follow Vue's Reactivity Rules）

を使用しています...（しかし、おそらく間違っている）

私はDevToolsの突然変異をチェックすると突然変異が予想通りに記録され、 "Commit"/"Commit All"を押すとリストの既存のオブジェクトはもはや入力。これは、明らかに、行動が文字通り状態への変更をコミットしていると仮定した場合に発生すると予想される動作です。しかし、なぜコード内で、そして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' 
    ]) 
    } 
    } 

は、デベロッパーツール内を要約すると、私はidとpriceの値は、私がstate.quotesに設定されたオブジェクト内変える見る - 彼らは明らかに縛られています私のコンポーネント内にあるquote.priceとquote.idのvモデルに接続します。 devtools内の "Commit All"がそれらのオブジェクトのプロパティーの変更を停止するのは、たった今です。なぜこれらのコミットを行うアクション内にcommitメソッドがないのですか？

Answer 1

オブジェクトリファレンストラップに該当しました。 引用符はオブジェクトで、ペイロードとしてアクションに渡されます。そのペイロードをコミットすると、参照があなたの状態になります。

ここで、コンポーネントとストアの両方が同じオブジェクトを指しています。

ソリューションが広がりオペレータまたは一般Object.assign

その（それがオブジェクトである場合）は、常にミューテータにペイロードをコピーすることをお勧めのいずれか、新しいオブジェクトへの入力をコピーすることです

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