Vuex 상태 필터링

Vuex 상태 필터링

Vue 개발 과정에서는 Vuex를 주(州)용으로 사용하는 방법에 대해 조금 더 검토했습니다.

이전에는 검색 기능이 있는 마스터 Vue 컴포넌트 1개, 루프오버할 아이템 배열 및 아이템 반복이 있었습니다.

단일 컴포넌트를 여러 컴포넌트(검색, 아이템 목록 및 아이템)로 분할하려고 했을 때 자 컴포넌트 내에서 무효 속성을 변경할 수 없다는 것을 알았습니다.

그러면 항목 목록을 어떻게 필터링해야 할까요?상태 돌연변이를 통해 처리합니까, 아니면 자식 구성요소의 계산된 속성을 통해 처리합니까?

아까는 하고 있었는데

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)
}

필터는 검색 컴포넌트 내에서 적용합니까, 아니면 상태 내에서 변환으로 적용합니까?

필터는 검색 컴포넌트 내에서 적용합니까, 아니면 상태 내에서 변환으로 적용합니까?

왜 변이시키려는지 모르겠네요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'
    ])
  }
  ...
}

언급URL : https://stackoverflow.com/questions/42657552/filter-vuex-state