如何管理Vuex Store中的嵌套數組並將其傳遞給組件

在我的Vuex Store中，我有一個計劃狀態，它描述了一週的計劃。如何管理Vuex Store中的嵌套數組並將其傳遞給組件

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 : '' 
       }] 
     }, 

     ... 

    } 
]

要顯示的一切，我有這樣的事情

PlanningWeek.vue

<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>

而且每一天我都PlanningDay.vue從他的道具檢索一天，然後渲染，但這是Vuex的一種方式嗎？由於通常我們總是必須從Vuex Store獲取/設置（提交）。

在Vuex Store中呈現嵌套數組的最佳方式是什麼？

我繼續嵌套的代碼，讓你擁有一切看

PlanningDay.vue

<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>

然後終於在PlanningMeeting.vue

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

我怎麼能將來自PlanningDek的道具的meeting.value綁定在PlanningWeek的哪個節目中？

由於修改與承諾改變狀態使這個看起來就像是這樣的：

<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-模型meetingList計算性能或者是這樣的，但如何管理綁定檢索planningId和meetingId，我的意思是以正確的方式。由於Vuex的意義在於不要放置事件，而道具到處都要提取這個數據層。

所以我做錯了什麼？如何在Vuex中管理嵌套數組以將數據傳遞給嵌套組件？

在此先感謝您的回答！

來源

2017-10-10 dib258

如果我沒有弄錯，你試圖將輸入的值保存到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) 
    } 
}

來源

2018-02-09 08:09:25

如何管理Vuex Store中的嵌套數組並將其傳遞給組件

回答

相關問題