Question

我在Vue开发过程中稍微考虑过将Vuex用于状态。

以前，我有一个具有搜索功能的主Vue组件，一个要循环的项目数组以及项目迭代本身。

当我想将单个组件拆分成几个组件（搜索，项目列表和项目）时 - 我看到我无法在子组件中更改反应属性。

那么，我应该如何过滤我的项目列表。我是通过状态变异还是通过子组件中的计算属性来处理它？</ p>

以前我在做

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

我的过滤器是应该从搜索组件中应用还是作为状态内的变异？

Answer 1

我的过滤器是应该从搜索组件中应用还是作为状态内的变异？

我不确定你为什么想要改变你的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'
    ])
  }
  ...
}

过滤Vuex状态

1 个答案: