Vue2 + Vuex 커밋이 실행되지 않음(Vue devtools 미포함)

Vue2 + Vuex 커밋이 실행되지 않음(Vue devtools 미포함)

Vuex로 기본적인 작업을 수행하려고 하는데, 어떤 이유로든 작동이 되지 않고, 멀리까지 찾아본 결과, 도움을 주셔서 대단히 감사합니다.

내가 하려는 일:

내 스토어의 개체 목록(개체)을 새 속성(개체)으로 업데이트합니다.

무엇이 잘못되었습니까?

구성 요소에서 새 개체를 커밋하는 작업을 디스패치하기 전에(mapActions를 통해 작업에 액세스 중), 목록에 있는 기존 개체의 특정 속성이 구성 요소의 입력/v-model에 연결된 값으로 업데이트됩니다.아래 코드와 같이 오브젝트와의 반응성이 문제라는 것을 알고 있기 때문에Vue.set(...)문서(Vue의 반응성 규칙을 따르는 평판)

왜 내가 완전히 바보 같은 짓을 하고 있다고 생각하지 않는지...(단, 틀릴 수도 있습니다)

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

요약하면, devtools에 다음과 같은 값이 표시됩니다.id그리고.price설정한 객체 내에서 변경state.quotes- 보아하니 그들은 V-ray에 묶여 있는 것 같아quote.price그리고.quote.id내 컴포넌트 안에 있습니다.devtools 내에서 "모두 커밋"해야 해당 개체의 속성이 더 이상 변경되지 않습니다.왜 안 되지?commit이러한 커밋을 하는 액션 내의 방법

오브젝트 참조 트랩에 빠졌습니다.따옴표는 개체로, 페이로드로 작업에 전달됩니다.이 페이로드를 커밋하면 참조가 상태에 저장됩니다.

이제 구성 요소와 저장소가 모두 동일한 개체를 가리킵니다.

해결책은 입력 내용을 새로운 오브젝트에 복사하는 것입니다.확산 연산자 또는Object.assign

일반적으로 payload를 항상 변환기로 복사하는 것이 좋습니다(객체일 경우).

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

언급URL : https://stackoverflow.com/questions/47893923/vue2-vuex-commit-not-committing-without-vue-devtools