过滤 Vuex 状态
Filter Vuex state
我在 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)
}
我的过滤器应该从搜索组件内应用还是作为状态内的突变应用?
Should my filters apply from within the search component or as a mutation within state?
我不确定您为什么要更改 state
以进行过滤,如果必须应用其他过滤器怎么办?我建议在组件 computed
.
中使用尽可能多的 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'
])
}
...
}
我在 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)
}
我的过滤器应该从搜索组件内应用还是作为状态内的突变应用?
Should my filters apply from within the search component or as a mutation within state?
我不确定您为什么要更改 state
以进行过滤,如果必须应用其他过滤器怎么办?我建议在组件 computed
.
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'
])
}
...
}