在我的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中管理嵌套数组以将数据传递给嵌套组件?
在此先感谢您的回答!