web-dev-qa-db-ja.com

Vuexの状態をフィルタリングする

Vueの開発では、状態にVuexを使用することを検討するようになりました。

以前は、1つのマスターVueコンポーネントで、検索、ループするアイテムの配列、およびアイテムの反復自体がありました。

単一のコンポーネントをいくつかのコンポーネント（検索、アイテムのリスト、およびアイテム）に分割しようとすると、子コンポーネント内からリアクティブプロパティを変更できないことがわかりました。

では、アイテムのリストをどのようにフィルタリングする必要がありますか。状態の変更または子コンポーネントの計算されたプロパティによってそれを処理しますか？

以前私はやっていた

export default {
    components: { Job },
    data() {
        return {
          list: [],
          categories: [],
          states: states,
          countries: countries,
          keyword: '',
          category: '',
          type: '',
          state: '',
          country: '',
          loading: true
        }
  },
  mounted() {
    axios.get('/api/cats.json')
        .then(response => 
            this.categories = response.data.data
        )
    axios.get('/api/jobs.json')
        .then(function (response) {
            this.list = response.data.data;
            this.loading = false;
        }.bind(this))
  },
  computed: {
    filteredByAll() {
      return getByCountry(getByState(getByType(getByCategory(getByKeyword(this.list, this.keyword), this.category), this.type), this.state), this.country)
    },
    filteredByKeyword() {
      return getByKeyword(this.list, this.keyword)
    },
    filteredByCategory() {
      return getByCategory(this.list, this.category)
    },
    filteredByType() {
      return getByType(this.list, this.type)
    },
    filteredByState() {
        return getByState(this.list, this.state)
    },
    filteredByCountry() {
        return getByCountry(this.list, this.country)
    }
  }
}

function getByKeyword(list, keyword) {
  const search = keyword.trim().toLowerCase()
  if (!search.length) return list
  return list.filter(item => item.name.toLowerCase().indexOf(search) > -1)
}

function getByCategory(list, category) {
  if (!category) return list
  return list.filter(item => item.category == category)
}

function getByType(list, type) {
  if (!type) return list
  return list.filter(item => item.type == type)
}

function getByState(list, state) {
    if(!state) return list
    return list.filter(item => item.stateCode == state)
}

function getByCountry(list, country) {
    if(!country) return list
    return list.filter(item => item.countryCode == country)
}

フィルタは検索コンポーネント内から適用する必要がありますか、それとも状態内のミューテーションとして適用する必要がありますか？

javascriptfilteringvue.jsvuex
5
Steven Grant

フィルタは検索コンポーネント内から適用する必要がありますか、それとも状態内のミューテーションとして適用する必要がありますか？

フィルタリングのためにstateを変更する理由がわかりません。他のフィルターを適用する必要がある場合はどうなりますか？コンポーネントのgettersにフィルターがあるのと同じ数のcomputedを使用することをお勧めします。

メソッドはjsファイルに配置できるため、他の場所で再利用できます。

export function getByKeyword(list, keyword) {
  const search = keyword.trim().toLowerCase()
  if (!search.length) return list
  return list.filter(item => item.name.toLowerCase().indexOf(search) > -1)
}

export function getByCategory(list, category) {
  if (!category) return list
  return list.filter(item => item.category == category)
}

export function getByType(list, type) {
  if (!type) return list
  return list.filter(item => item.type == type)
}

export function getByState(list, state) {
    if(!state) return list
    return list.filter(item => item.stateCode == state)
}

export function getByCountry(list, country) {
    if(!country) return list
    return list.filter(item => item.countryCode == country)
}

あなたはあなたの店でこれを持つことができます：

// someStoreModule.js

import {getByKeyword, getByCategory, getByType, getByState, getByCountry} from 'path/to/these/functions/file.js'

state: {
  list: [],
  categories: [],
  states: states,
  countries: countries,
  keyword: '',
  category: '',
  type: '',
  state: '',
  country: '',
  loading: true
},
getters: {
  filteredByAll() {
    return getByCountry(getByState(getByType(getByCategory(getByKeyword(state.list, state.keyword), state.category), state.type), state.state), state.country)
  },
  filteredByKeyword() {
    return getByKeyword(state.list, state.keyword)
  },
  filteredByCategory() {
    return getByCategory(state.list, state.category)
  },
  filteredByType() {
    return getByType(state.list, state.type)
  },
  filteredByState() {
      return getByState(state.list, state.state)
  },
  filteredByCountry() {
      return getByCountry(state.list, state.country)
  }
}

最後に、コンポーネントは次のように使用できます。

import { mapGetters } from 'vuex'

export default {
  ...
  computed: {
    ...mapGetters([  // you won't need to destructure if 
     'filteredByKeyword',   // you have no plans of adding other computed
     'filteredByCategory',  // properties. It would be safer anyway to keep it.
     'filteredByAll',
     'filteredByType',
     'filteredByState',
     'filteredByCountry'
    ])
  }
  ...
}
8
Amresh Venugopal