Question

我是VueJs和Vuex的新手，我想创建一个简单的搜索过滤器。我的应用看起来像这样。

项目->父项
ItemToolbar->子
ItemList->子

Items.vue ：

<template>
  <div>
    <ItemToolbar></ItemToolbar>
    <ItemList :allItems="allItems"></ItemList>
  </div>
</template>

computed: {
  ...mapGetters(["allItems"])
}

因此，我尝试在 getters 中创建名为searchByTitle的过滤器。

const getters = {
 allItems: state => state.items,
 searchByTitle: state => searchValue => {
    const search = searchValue.trim().toLowerCase();
    return state.items.filter(
      item => item.title.toLowerCase().indexOf(search) > -1
    );
   }
};

我的问题是searchValue的值将来自ItemToolbar组件，我不知道该在哪里使用searchByTitle并将其称为ItemToolbar组件或Items组件。

Answer 1

我将从ItemToolbar.vue到Items.vue发出事件，然后将决定它必须显示哪些项目：如果标题存在-过滤，如果没有-所有项目。

<template>
<div>
   <ItemToolbar @filter="title = $event"></ItemToolbar>
   <ItemList :all-items="filteredItems"></ItemList>
</div>
</template>

...
data() {
  return {
    title: '',
  }
},
computed: {
  ...mapGetters(['allItems', 'searchByTitle']),
  filteredItems() {
    return this.title ? this.searchByTitle(title) : allItems
  },
},
...

然后从title发出ItemToolbar.vue：

this.$emit('filter', VALUE_OF_THE_TITLE')

Vuex创建搜索过滤器

1 个答案: