Vuex Store에서 네스트된 어레이를 관리하고 컴포넌트를 전달하는 방법

Vuex Store에서 네스트된 어레이를 관리하고 컴포넌트를 전달하는 방법

제 Vuex 스토어에는 일주일간의 계획을 나타내는 계획 상태가 있습니다.

planning : [
        {
            name : 'monday',
            meetings : [
                {
                    name : 'morning',
                    value : ''
                }, {
                    name : 'noon',
                    value : ''
                }, {
                    name : 'evening',
                    value : ''
                }]
        },
        {
            name : 'tuesday',
            meetings : [
                {
                    name : 'morning',
                    value : ''
                }, {
                    name : 'noon',
                    value : ''
                }, {
                    name : 'evening',
                    value : ''
                }]
        },

        ...

    }
]

내가 가진 모든 것을 표시하려면 다음과 같이 표시하기 위해

Planning Week.표시하다

<template>
    <div class="week columns is-desktop is-vcentered">
        <PlanningDay v-for="(day, index) in planning" :key="index" :day="day"></PlanningDay>
    </div>
</template>

<script>
    import PlanningDay from './PlanningDay';
    import { mapState } from 'vuex';

    export default {
        computed : mapState(['planning']),
        components : {
            PlanningDay
        },
    };
</script>

그리고 저는 매일 계획일을 가지고 있습니다.그의 소품에서 하루를 가져와 렌더링하는 vue. 하지만 Vuex 같은 방식입니다.보통 Vuex 스토어에서 항상 가져오거나 설정(커밋)해야 합니다.

Vuex 스토어에서 중첩된 어레이를 렌더링하는 가장 좋은 방법은 무엇입니까?

네스트된 코드를 계속 사용하면 모든 것을 볼 수 있습니다.

계획일표시하다

<template>
    <div class="day column">
        <p class="name has-text-centered" v-text="day.name"></p>

        <PlanningMeeting v-for="(meeting, index) in day.meetings" :key="index" :meeting="meeting"></PlanningMeeting>
    </div>
</template>

<script>
    import PlanningMeeting from './PlanningMeeting';

    export default {
        props : ['day'],
        components : {
            PlanningMeeting
        }
    };
</script>

그리고 마지막으로 Planning Meeting.표시하다

<template>
    <div class="meeting">
        <p class="has-text-centered" v-text="meeting.name"></p>
        <input type="text" v-model="meeting.value">      
    </div>
</template>

PlanningWeek에서 온 PlanningDay의 소품에서 가져온 meeting.value를 어떻게 묶을 수 있을까요?

변경은 상태를 변경하기 위해 커밋을 사용하여 이루어지기 때문에 다음과 같습니다.

<script>
    export default {
        props : ['meeting'],
        computed : {
            meetingList : {
                get() {
                    return this.$store.state.planning[planningId].meetings[meetingId];
                },
                set(value) {
                    this.$store.commit('updateValue', ...planningId, meetingId, ... value);
                }
            }
        },
    };
</script>

따라서 v-model을 meetingList 계산 속성 또는 이와 유사한 속성으로 바인딩하지만 적절한 방법으로 planningId 및 meetingId를 검색하는 방법을 지정합니다.Vuex의 요점은 이벤트와 소품을 곳곳에 배치하지 않고 데이터 레이어를 추출하는 것입니다.

제가 잘못하고 있는 건가요?Vuex에서 네스트된 어레이를 관리하여 네스트된 컴포넌트에 데이터를 전달하는 가장 좋은 방법은 무엇입니까?

답변해 주셔서 감사합니다!

가장 좋은 방법은 중첩된 구조를 피하는 것입니다.이는 redux와 같은 다른 글로벌 상태 단일 상태 트리 시스템에서도 확립된 패턴입니다.하지만 여기서 Redux는 필요 없습니다.데이터를 정규화하는 것은 좋은 방법입니다.이러한 패턴은 vuex에도 적용할 수 있습니다.

기본적으로 정규화란 다음을 의미합니다.

planning : [
    {
        name : 'monday',
        meetings : [
            {
                name : 'morning',
                value : ''
            }, {
                name : 'noon',
                value : ''
            }, {
                name : 'evening',
                value : ''
            }]
    },
    {
        name : 'tuesday',
        meetings : [
            {
                name : 'morning',
                value : ''
            }, {
                name : 'noon',
                value : ''
            }, {
                name : 'evening',
                value : ''
            }]
    },

    ...

}
]

다음과 같이 입력합니다.

planning: {
  name: [monday,tuesday],
  meetings: {
    monday: { id: 'monday', name: [1,2,3] },
    tuesday: { id: 'tuesday', name: [4,5,6] },
  }
},
name : {
   meetings : {
    1: {id: 1, text: 'morning' , value: ''},
    2: {id: 2, text: 'noon' , value: ''},
    3: {id: 3, text: 'evening' , value: ''},        
    4: {id: 4, text: 'morning' , value: ''},
    5: {id: 5, text: 'noon' , value: ''},
    5: {id: 6, text: 'evening' , value: ''},        
    }
}

이제 Vuex Store에 간단한 Getter와 Setter를 구현할 수 있습니다.좀 더 복잡한 것 같고, 어떻게 보면 좀 더 복잡한 것 같아요.그러나 업데이트의 경우 돌연변이를 쓸 때 중첩과 관련된 문제를 걱정할 필요가 없다는 것이 장점입니다.

예: 모든 계획의 정렬된 배열이 필요한 경우 getter를 작성합니다.

planningArray (state) => {
  return state.planning.list.map { 
            name => state.planning.meetings[name]
  }
}

이것을 사용하면, 소품을 건네줄 필요가 없습니다.변경할 때마다 데이터를 스토어에 푸시하고 "계산/방법"을 사용하여 다른 구성 요소로 가져옵니다.

입력 값을 vuex 상태(meetings.value 객체)에 저장하려고 합니다.

먼저 입력을 별도의 객체로 바인드해야 합니다.친절한 방법:

data () {
  return {
    value: null
  }
}

템플릿 섹션에서

<input type="text" v-model="value">
<button @click="onValueSaved"></button>

값을 vuex 상태로 저장하는 방법을 선언해야 합니다.

methods: {
   onValueSaved () {
     this.$store.commit('SET_MEETING_VALUE', this.value)
   }
}

언급URL : https://stackoverflow.com/questions/46666011/how-to-manage-nested-arrays-in-vuex-store-and-pass-it-trough-component