0

我有一个页面，用户可以在其中编辑多个段。每个段都有一个名称和一组他可以添加/删除的过滤器。

{
  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 存储。

输入中的段名称也是如此。但是有一个示例如何处理文档中的表单。

但是我怎样才能使过滤器工作呢？为过滤器创建单独的商店？但这将是一团糟，因为页面上会有多个带有自己过滤器的片段......我被卡住了:(

4

1 回答 1

0

正如我从 vuex repo 本身的对话中了解到的那样，唯一的方法和最佳决策是深度克隆filters数组，然后将其用作局部变量。

必须这样做，因为 JS 中的数组总是通过引用传递，并且深度克隆将我的filters数组与 vuex 存储中的数组解除绑定。

这可以通过JSON.parse(JSON.stringify())或_.cloneDeep()任何其他类似方法来实现。

于 2016-09-30T07:13:28.857 回答