Question

我正在尝试在Vuex中创建一个吸气剂，以返回状态的过滤版本。过滤器如下所示：

const state = () => ({
  recipes: [],
  appliedFilters: {
    engineers: null,
    categories: null,
    formats: null
  }
})

...

const getters = {

  getFilteredRecipes(state) {
    const appliedFilters = state.appliedFilters
    let recipesClone = state.recipes.slice(0)
    Object.keys(appliedFilters).forEach((key) => {
      var value = appliedFilters[key];
      if (value != null) {
        recipesClone.filter((recipe) => {
          return recipe.fields[key].some((field) => {
            return field.sys.id === value
          })
        })
      }
    })
    return recipesClone
  }

}

因此state.appliedFilters是一个对象，根据用户在选择字段中的选择，该对象通过操作从模块更改其值。如果用户在工程师的选择字段中选择“工程师A”，则将分派一个动作，并且将state.appliedFilters.engineer设置为所选值的突变，在本例中为“工程师A”的ID。

我想遍历该对象的键/值对，以查看已做出的选择，然后连续过滤state.recipes，直到通过所有应用的过滤器为止。因此，如果我使用上面的示例，则过滤器应返回所有以“工程师A”为工程师的配方。如果过滤器值为null，则应跳过过滤并转到appliedFilters的下一个键/值对，在这种情况下为categories。

但是每次吸气剂都会返回所有配方。知道我在这里做错了吗？

Answer 1

recipesClone.filter实际上并没有改变recipesClone，它只是返回一个新的过滤列表，因此您应该将该新列表分配给recipesClone以反映其中的变化。 recipesClone = recipesClone.filter(...)。

这是我在代码中看到的一个明显问题。看看是否足以解决它。

Answer 2

在此函数调用中，您正在克隆数组，使用应用的过滤器数组进行操作，然后仅返回数组的克隆：

 getFilteredRecipes(state) {
    const appliedFilters = state.appliedFilters
    let recipesClone = state.recipes.slice(0) // clone here
    Object.keys(appliedFilters).forEach((key) => { // loop here
      var value = appliedFilters[key];
      if (value != null) {
        recipesClone.filter((recipe) => {   // no return here
          return recipe.fields[key].some((field) => {
            return field.sys.id === value
          })
        })
      }
    })
    return recipesClone // return original
  }

如果要返回过滤后的食谱版本，则需要返回过滤结果。从您的问题中并不清楚过滤器如何与您的数据相关，但是类似这样的操作会返回过滤的数据：

getFilteredRecipes(state) {

    const appliedFilters = state.appliedFilters
    let recipesClone = state.recipes.slice(0)
    let filteredRecipes = []
    Object.keys(appliedFilters).forEach((key) => {
      var value = appliedFilters[key];
      if (value != null) {
        const filtered = recipesClone.filter((recipe) => {
          return recipe.fields[key].some((field) => {
            return field.sys.id === value
          })
        })
        filteredRecipes = [...filteredRecipes, ...filtered] // ??
      }
    })
    return flteredRecipes;
  }

基于嵌套数组的过滤返回全部

2 个答案: