Vuex 스토어 값을 입력하지 않고 업데이트

Vuex 스토어 값을 입력하지 않고 업데이트

나는 vue-cli와 vuex와 함께 프로젝트를 하면서 노트를 시작했다.나는 모든 것을 올바르게 설정했고, vuex 스토어에 새 노트를 추가할 때 외에 모든 것이 잘 작동하는데, 그것은 괜찮지만 입력 필드의 값을 변경하면 vuex 스토어 값 또한 아무 약속 없이 업데이트된다.

여기에 암호가 있다 -

<template>
    <div>
       {{title}}
        <input type="text" v-model="note.msg">
        <button v-on:click="addNote()">ADD</button>
    </div> 
</template>
<script>
module.exports = { 
  data() {
    return {  
       title:'Add node', 
       note: {
           msg: this.msg,
           avatar:'wolf'
        }
    }
  }, 
  methods: { 
    addNote(){  
        this.$store.dispatch("updateNotes",this.note);
    }
  },  
}
</script>
<style scoped> 
</style>

노트를 추가한 후 입력값을 변경하면 vuex 스토어와 목록을 표시하는 다른 구성 요소에서도 업데이트된다.

내가 시도한 것은 이것이다 - note.msg를 v-model로 만드는 대신에 msg로 변경했고 데이터 개체와 계산된 속성이 그에 따라 업데이트되었고 내 문제를 해결했다.

<template>
    <div>
       {{title}}
        <input type="text" v-model="msg">
        <button v-on:click="addNote()">ADD</button>
    </div> 
</template>
<script>
module.exports = { 
  data() {
    return {  
       title:'Add node', 
        msg:''
    }
  }, 
  methods: { 
    addNote(){ 
        let note = {
            msg: this.msg,
            avatar:'wolf'
        };
        this.$store.dispatch("updateNotes",note);
    }
  },  
}
</script>
<style scoped> 
</style>

엄밀히 말하면 난 아무 문제가 없어, 단지 이 일을 이해할 수가 없었어.그렇게 될 줄은 몰랐어.나는 두 번째 행동이 첫 번째 행동이 아니라고 예상했었다.

편집

action.js

const updateNotes = (context, payload) => {
    context.commit('updateNotes', payload);
}

export default {  
    updateNotes,
};

돌연변이js

const updateNotes = (state, data) => {
    state.notes.push(data);
}

export default { 
    updateNotes
};

그것들은 내 프로젝트에서 일어난 돌연변이와 행동들이다.

언제updateNote액션이 처음으로 전송됨, 의도치 않게 입력의 연결부를 생성함v-model(this.note) 및 Vuex 상태notes.

JavaScript에서 객체는 참조로 전달되는데, 이것은 JavaScript 객체를 변수에 할당할 때, 새로운 복사본을 만들지 않고, 실제로 두 변수가 동일한 정확한 객체를 가리키도록 만든다는 것을 의미한다.하나를 변경하면 다른 하나가 변경된다. (이는 Vue/Vuex와는 상관이 없으며 바닐라 자바스크립트에 해당된다.)

그래서 합격하면this.noteVuex에게 추가한 항목은 고유한 개체가 아니라 구성 요소에서 사용되는 항목과 정확히 동일함.그리고 당신이 추가하는 모든 물건에 대해 이렇게 될 것이다.동작이 계속 참조를 전달하기 때문에 모두 입력을 다시 가리킨다.this.note.

당신의 수정에서 이런 일이 일어나지 않는 이유는 당신이 매번 새로운 오브젝트를 만들기 때문이다.addNote그리고 그것을 통과시켜라.그래서 아무와도 연결되지 않는다.

Vuex를 사용하는 경우strictVuex는 이에 대해 오류를 발생시킬 수 있다.

오류: [vuex] 돌연변이 처리기 외부의 vuex 저장소 상태를 변경하지 마십시오.

저장소를 정의할 때 모드를 켤 수 있다.

const store = new Vuex.Store({
  strict: true,  // Turning on strict mode
  state: {
    note: null
  }
}

참조URL: https://stackoverflow.com/questions/64939977/vuex-store-values-getting-update-without-comitting