如何在 Vuex Store 中管理嵌套数组并通过组件传递它
How to manage nested arrays in Vuex Store and pass it trough component
在我的 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 商店 get/set(提交)。
在 Vuex 商店中呈现嵌套数组的最佳方式是什么?
我继续嵌套代码,以便您可以看到所有内容
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>
我怎样才能绑定来自 PlanningDay 的道具的 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-model 与 meetingList 计算属性或类似的东西绑定,但如何设法检索 planningId 和 meetingId,我的意思是以正确的方式。因为 Vuex 的重点是不要到处放事件和道具并提取这个数据层。
那我是不是做错了什么?以及如何在 Vuex 中管理嵌套数组以将数据传递给嵌套组件的最佳方式?
预先感谢您的回答!
如果我没记错的话,你正在尝试将输入的值保存到 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)
}
}
最好的办法是避免嵌套结构。这也是其他全局状态单状态树系统(如 redux)中的既定模式。但是这里不需要 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 中实现简单的 getters 和 setter Store.It 看起来更复杂,在某种程度上,有点。但是好处是对于更新,写mutation的时候不用担心嵌套相关的问题。
例如:如果你需要所有规划的排序数组,你写一个getter:
planningArray (state) => {
return state.planning.list.map {
name => state.planning.meetings[name]
}
}
使用这个不需要传递道具。对于每次更改,您都将数据推送到 Store 中,然后使用 "computed/methods"
将其检索到另一个组件中
在我的 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 商店 get/set(提交)。
在 Vuex 商店中呈现嵌套数组的最佳方式是什么?
我继续嵌套代码,以便您可以看到所有内容
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>
我怎样才能绑定来自 PlanningDay 的道具的 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-model 与 meetingList 计算属性或类似的东西绑定,但如何设法检索 planningId 和 meetingId,我的意思是以正确的方式。因为 Vuex 的重点是不要到处放事件和道具并提取这个数据层。
那我是不是做错了什么?以及如何在 Vuex 中管理嵌套数组以将数据传递给嵌套组件的最佳方式?
预先感谢您的回答!
如果我没记错的话,你正在尝试将输入的值保存到 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)
}
}
最好的办法是避免嵌套结构。这也是其他全局状态单状态树系统(如 redux)中的既定模式。但是这里不需要 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 中实现简单的 getters 和 setter Store.It 看起来更复杂,在某种程度上,有点。但是好处是对于更新,写mutation的时候不用担心嵌套相关的问题。
例如:如果你需要所有规划的排序数组,你写一个getter:
planningArray (state) => {
return state.planning.list.map {
name => state.planning.meetings[name]
}
}
使用这个不需要传递道具。对于每次更改,您都将数据推送到 Store 中,然后使用 "computed/methods"
将其检索到另一个组件中