Vue2 + Vuex 커밋하지 않음 (Vue devtools 제외)

Question

Vuex의 기본 작업을 수행하려고하지만 어떤 이유로 작동하지 않으며 멀리서 검색 한 결과 크게 도움이됩니다. 객체의

업데이트 목록 (개체) 내 가게에서 새 속성 (객체)로 : 나는을 할 노력하고있어 무엇

.

잘못 무엇을거야 : 나는 심지어 내 구성 요소에서 새 개체를 (내가 mapActions를 통해 작업을 접근하고있어) 커밋 할 작업을 파견하기 전에

, 목록에있는 기존 개체의 특정 속성이 업데이트 내 구성 요소의 입력/v- 모델에 연결된 값이 있습니다. 내 코드는 아래에서 볼 수 있듯이, 나는 물체 반응성이 문제가 알고, 그래서 ... 난 완전히 바보 같은 일을하고 있다고 생각 (하지만하지 않는 이유는 문서 (Mutations Follow Vue's Reactivity Rules)

당 Vue.set(...)을 사용하고 있습니다 아마도 잘못된 것입니다.)

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로 설정 객체 내에서 변화에 대한 값을 참조는 DevTools로 내을 요약하면 - 그들은 분명히 묶여 구성 요소 내에서 quote.price 및 quote.id의 v- 모델로 devtools 내에서 "Commit All"을 사용하면 해당 객체의 속성이 변경되지 않습니다. 이 커밋을 수행하는 작업에 commit 메서드가없는 이유는 무엇입니까?

Answer 1

개체 참조 함정에 빠졌습니다. 견적은 페이로드로 동작에 전달되는 개체입니다. 페이로드를 커밋하면 참조이 사용자의 주에 안전합니다.

이제 구성 요소와 저장소가 같은 개체를 가리 킵니다.

는

이 솔루션은 하나 일반적으로 확산 운영자 또는 Object.assign

그것의 항상 뮤 테이터의 페이로드를 복사하는 것이 좋습니다으로, 새로운 객체로 입력을 복사하는 것입니다

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

(이것은 객체 인 경우)