상태가 업데이트되면 데이터가 변경되는 이유는?

상태가 업데이트되면 데이터가 변경되는 이유는?

나는 vuex와 함께 vue를 사용하고 있고, 나는 단지 문제를 추적하는데 몇 시간을 보냈다.네가 도와줄 수 있을지도 몰라.

내 질문은 왜 내가 새로운 팀을 만든 후에newTeamCreateTeam에서 메서드.뷔, 더listOfTeams내 팀원들.Vue도 업데이트되었는가?

• 나는 내 팀 vue에서 구독이나 시계, 감시자를 만든 적이 없다.왜?listOfTeams새 팀 추가하면 업데이트되는 겁니까?
• 이게 바로 vuex의 정확한 행동인가?제발 나를 이해시켜 주세요.

---

여기 내 팀이 있다.부에를 하다

data() {
    return { listOfTeams: [] }
},

methods: {
    loadRecord: async function() {
        const response = await this.$store.dispatch("teams/load");
        this.$store.commit("teams/intitialize", response.data);
        this.listOfTeams = response.data;
    }
},

작성팀.부에를 하다

methods: {
    newTeam: async function() {
        const response = await this.$store.dispatch("team/store", formData);
        this.$store.commit("teams/add", response.data);
    }
}

그리고 여기 내가 사용하는 팀들.js (모듈)

const state = { record: {}, };
const actions = {
    store({commit,state}, payload) { return httpFile().post('/teams', payload); },
    
    load({ commit, state }, payload = "") { return http().get("teams" + payload); }
};

const mutations = {
    intitialize(state, payload) { state.record = payload.data.data; },
    
    add(state, payload) { state.record.unshift(payload.data); },
};

Javascript는 참조 기반의 언어(모든 변수와 구성원이 포인터라는 것을 가장 간단하게 생각할 수 있는 방법)이다.

예를 들어, 이 말은

let x = [];
let a = {y: x}; // Doesn't make a copy of x
console.log(a.y.length); // output is 0
x.push(10);
console.log(a.y.length); // output is 1

a.y생성 직후 비어 있었지만 멤버는 여전히 같은 배열을 가리키고 있다.x, 그래서 요소 추가x또한 에 요소를 추가한다.a.y왜냐하면 둘 다 같은 대상에 대한 포인터가 되기 때문이야

당신의 코드로

this.listOfTeams = response.data;

을 복사하지 않고 있다response.data그러므로 만약 그 물체가 수정된다면(예: 비우고 새로운 새로운 배열을 만드는 대신 새로운 값이 추가됨) 당신의 멤버도 바뀔 것이다.

해결 방법:

this.listOfTeams = response.data.slice();

이렇게 하면 회원 클래스가 자체 배열을 가질 수 있으며 다른 코드와 혼동하지 않을 수 있다.response.data네가 배정한 후에 말이야

이것은 JavaScript 객체 참조 문제 입니다.

1. 에 저장된 일부 비동기 HTTP 호출에서 응답을 받는 경우response변수(물체)

2. 그 대상을 커밋하면(글쎄요, 그것 때문에)data에 있는 당신의 상점으로.intitialize돌연변이

   state.record = payload.data.data
   

   여기payload.data그리고response.data같은 목적이다

3. 그런 다음 팀 목록을 설정하십시오.data같은 목적의 재산.

   this.listOfTeams = response.data
   

어느 시점에서도 객체 참조를 위반하지 않으므로 다음에 새 팀을 추가할 때add돌연변이가 있으면, 그것은 직접 그 스토어 데이터를 조작한다.Array.prototype.unshift()...

state.record.unshift(payload.data)

너는 세가지 모두를 바꾸고 있다.response.data.data,this.listOfTeams그리고state.record왜냐하면 그것들은 모두 같은 목적어 참조이기 때문이다.

직접 할당을 할 때 개체 참조를 끊을 뿐만 아니라 스토어 상태를 불변으로 간주하는 것이 좋은 이유다.

const mutations = {
  intitialize (state, { data }) {
    state.record = {...data.data} // break reference via spread
  },
  add(state, { data }) {
    state.record = [data, ...state.record] // immutable
  }
}

lodash를 사용하거나 사용하려는 경우 _.cloneDeep을 사용하여 참조를 중단하고 이전 값을 기반으로 새 값을 생성해 보십시오.

참조URL: https://stackoverflow.com/questions/63335011/why-does-the-data-change-when-the-state-is-updated