Vue.js + Vuex: 중첩된 항목 상태를 변경하는 방법

Vue.js + Vuex: 중첩된 항목 상태를 변경하는 방법

내가 나무 따라다닌다고 하자.

[
    {
        name: 'asd',
        is_whatever: true,
        children: [
            {
                name: 'asd',
                is_whatever: false,
                children: [],
            },
        ],
    },
],

트리는 Vuex를 통해 키 '트리' 아래에 있는 모듈에 저장되며 '재귀-항목'이라고 불리는 다음과 같은 재귀적 구성 요소로 루프를 통과한다.

<li class="recursive-item" v-for="item in tree">
    {{ item.name }}

    <div v-if="item.is_whatever">on</div>
    <div v-else>off</div>

    <ul v-if="tree.children.length">
        <recursive-item :tree="item.children"></recursive-item>
    </ul>
</li>

이제 항목의 속성을 'is_whatever'로 전환하고 싶으므로 수신기를 첨부한다.

    <div v-if="item.is_whatever" 
         @click="item.is_whatever = !item.is_whatever">on</div>
    <div v-else>off</div>

클릭하면 동작하지만, 다음과 같은 동작이 나온다.

"Error: [vuex] Do not mutate vuex store state outside mutation handlers."
[vuex] Do not mutate vuex store state outside mutation handlers.

이 오류 없이 어떻게 구현해야 하는가?중첩되고 재귀적이어서 특정 항목에 대한 경로가 없기 때문에 어떻게 조치를 취하거나 사건을 나무 꼭대기로 내보낼 수 있는지 알 수가 없지?

그날 저녁 늦게 다른 개발자들과 상의한 후에 우리는 그것을 어떻게 성취할 수 있는 몇 가지 방법을 가지고 왔다.데이터가 트리에 중첩되어 있고 나는 반복적으로 노드에 액세스하기 때문에 특정 노드에 대한 경로를 얻어서 예를 들어 노드의 인덱스를 속성으로 통과시킨 다음, 모든 노드에서 반복적으로 반복하면서 자식 인덱스를 추가하거나, 노드 ID만 통과시킨 다음 동작에서 반복 루프를 실행해야 한다.그 속성을 전환하다.

보다 최적의 솔루션은 데이터 구조를 평평하게 만드는 것이므로 재귀가 필요하지 않을 수 있다.그런 다음 ID를 통해 직접 노드에 접근할 수 있다.

지금 당신은 직접 전화를 걸어 상태 개체를 변경하고 있다.item.is_whatever = !item.is_whatever, 적절한 반응성을 보장하기 위해 수술을 실행할 돌연변이 함수를 만드는 것이 필요하다.

const store = new Vuex.Store({
  state: { /* Your state */ },
  mutations: {
    changeWhatever (state, item) {
      const itemInState = findItemInState(state, item); // You'll need to implement this function
      itemInState.is_whatever = !item.is_whatever
    }
  }
})

그럼 노출 시켜야죠this.$store.commit('changeWhatever', item)클릭에 의해 트리거되는 동작으로.

참조URL: https://stackoverflow.com/questions/45665099/vue-js-vuex-how-to-mutate-nested-item-state