過濾器Vuex狀態

Question

我已經在我的Vue開發中轉移到了使用Vuex狀態的一點點。

以前，我有一個主要的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) 
} 

如果我的過濾器從應用搜索組件內或國家內的突變？

Answer 1

我的濾鏡應該從搜索組件中應用還是作爲狀態內的突變應用？

我不確定你爲什麼要改變你的state進行過濾，如果需要應用其他過濾器，該怎麼辦？我建議使用盡可能多的getters，因爲您已在組件的中使用過濾器。

方法可以放在一個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' 
    ]) 
    } 
    ... 
}