我有一个页面,用户可以在其中编辑多个段。每个段都有一个名称和一组他可以添加/删除的过滤器。
{
segments: [
{
name: 'Mac',
filters: [
{
field: 'os',
value: 'mac'
},
{
field: 'browser',
value: 'chrome'
}
]
}
]
}
索引.vue
<template>
<div class="segments">
<segment
v-for="segment in segments"
:id="segment.id"
:name="segment.name"
:filters="segment.filters">
</segment>
</div>
</template>
<script>
import Segment from './Segment'
export default {
vuex: {
getters: {
segments
}
},
components: {
Segment
}
}
</script>
段.vue
<template>
<div class="segment">
<input type="text" class="name" v-model="name" />
<filters :filters="segment.filters"></filters>
<button @click="saveSegment()">Save</button>
</div>
</template>
<script>
import Filters from './Filters'
export default {
props: ['id', 'name', 'filters'],
vuex: {
methods: {
updateSegment({dispatch}, id, segments) {
dispatch(SEGMENT_UPDATE, id, segment)
}
}
},
methods: {
save () {
this.updateSegment(this.id, {
name: this.name,
filters: this.filters
})
}
}
}
</script>
过滤器.vue
<template>
<ul class="filters">
<li v-for="filter in filter">
{{ filter.name }} <button @click="remove($index)">Remove</button>
</li>
</ul>
</template>
<script>
export default {
props: ['filters'],
methods: {
remove (index) {
this.filters.splice(index, 1)
}
}
}
</script>
每次删除过滤器时,都会Do not mutate vuex store state outside mutation handlers.
出错。而且我知道为什么,因为无论我通过组件属性传递过滤器数组多少次,它们仍然保持反应性,并且它们在过滤器组件中的更改传播到引发错误的 vuex 存储。
输入中的段名称也是如此。但是有一个示例如何处理文档中的表单。
但是我怎样才能使过滤器工作呢?为过滤器创建单独的商店?但这将是一团糟,因为页面上会有多个带有自己过滤器的片段......我被卡住了:(