0

ユーザーが複数のセグメントを編集できるページがあります。すべてのセグメントには名前と、追加/削除できるフィルターの配列があります。

{
  segments: [
    {
      name: 'Mac',
      filters: [
        {
          field: 'os',
          value: 'mac'
        },
        {
          field: 'browser',
          value: 'chrome'
        }
      ]
    }
  ]
}

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

Filters.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 リポジトリ自体の会話から理解したように、唯一の方法と最善の決定は、filters配列をディープ クローンし、それをローカル変数として使用することです。

JS の配列は常に参照によって渡され、ディープ クローンfiltersは vuex ストア内の配列から配列をバインド解除するため、これを行う必要があります。

JSON.parse(JSON.stringify())これは、_.cloneDeep()または他の同様の方法で実現できます。

于 2016-09-30T07:13:28.857 に答える