Vue 过滤器类型错误和渲染

Question

当我刷新主页并转到导航栏中的类别时，我在getters过滤器中遇到错误，我遇到了错误类型错误并呈现。

TypeError: state.productsShop.filter is not a function

Error in render: "TypeError: state.subCategoiesShop.filter is not a function"

TypeError: state.subCategoiesShop.filter is not a function

(in promise) TypeError: state.subCategoiesShop.filter is not a function

我从过滤器中得到的所有这些错误

我的州

state: {
filter: 'all',
subFilter: 'all',
products: {},
categories: {},
categoriesNav: {},
products_4: {},
productsShop: {},
subCategoiesShop: {},
aboutBanar: {},
},

我在这里的Getters是我的问题

getters: {
productsFiltered(state) {
if (state.subFilter == 'all' && state.filter == 'all') {
return state.productsShop
} else {
return state.productsShop.filter(function(product) {
return (state.subFilter === 'all' ? product.category_id > 0 : product.category_id === state.subFilter ) && (state.filter === 'all' ? product.subcategory_id > 0 : product.subcategory_id === state.filter )
// return product.category_id == state.subFilter && pr  oduct.subcategory_id == state.filter
})
}
// return state.productsShop
},
subCategoryShopFilter(state) {
if (state.subFilter == 'all') {
return state.subCategoiesShop
} else {
return state.subCategoiesShop.filter(category => { 
return category.category_id === state.subFilter
})
}
// return state.subCategoiesShop
}
},

我的突变

updateCategory(state, subFilter) {
state.subFilter = subFilter
},
updateSubCategory(state, filter) {
state.filter = filter
},
landingFirst(state, products) {
state.products = products
},
landingSecond(state, categories) {
state.categories = categories
},
landingThird(state, products_4) {
state.products_4 = products_4
},
categories(state, categories) {
state.categoriesNav = categories
},
products(state, productsShop) {
state.productsShop = productsShop
},
subcategories(state, subcategories) {
state.subCategoiesShop = subcategories
},
retriveAbout(state, aboutBanar) {
state.aboutBanar = aboutBanar
},
},

我的操作

来自 Laravel api 路由的 Axios API

updateCategory(context, subFilter) {
context.commit('updateCategory', subFilter) 
},
updateSubCategory(context, filter) {
context.commit('updateSubCategory', filter) 
},
categories(context) {
return new Promise((resolve, reject) => {
axios.get('categories')
.then(response => {
context.commit('categories', response.data)
resolve(response)
})
.catch(error => {
reject(error)
})
})
},
products(context) {
return new Promise((resolve, reject) => {
axios.get(`shop/products`)
.then(response => {
context.commit('products', response.data)
resolve(response)
})
.catch(error => {
reject(error)
})
})
},
subCategories(context) {
return new Promise((resolve, reject) => {
axios.get(`shop/subcategories`)
.then(response => {
context.commit('subcategories', response.data)
resolve(response)
})
.catch(error => {
reject(error)
})
})
},

My Shop.vue 组件

export default {
props: {
link: {
type: String,
},
slug: {
type: String,
},
},
data() {
return {
filter: 'all',
categories: {},
}
},
mounted() {
this.$store.dispatch('products')
this.$store.dispatch('subCategories')
},
computed: {
productsFilter() {
return this.$store.getters.productsFiltered
},
categories1() {
return this.categories = this.$store.state.categoriesNav
},
subCategoryShopFilter() {
return this.$store.getters.subCategoryShopFilter
},
},
methods: {
changeFilter(filter) {
this.$store.dispatch('updateSubCategory', filter)
},  
},
}

谢谢

Answer 1

过滤器来自只能在数组上调用的Array.prototype.filter()，而不能在任何对象上调用。当你初始化你的状态变量时，你说productsShop: {}{}是一个空对象的简写初始化，而不是[]会给你一个空数组。

这是否完全解决了您的问题取决于代码的其余部分。至于你最初遇到的错误，这就是推理。

Answer 2

过滤器只能在数组上调用！