如何使用 vue/vuex 从输入中过滤数据？

Posted 2023-02-23

【中文标题】如何使用 vue/vuex 从输入中过滤数据？

【英文标题】：How I filter data from an input using vue/vuex?

【发布时间】：2019-07-24 16:50:55

【问题描述】：

我想知道如何通过输入过滤来自计算属性的数据。

我的问题来自于属性计算 dataFiltered() ，其中返回了一个 getter，但它有一个字符串作为参数。

我希望在写单词时通过输入过滤信息。

Home.vue

  </template>
     <input type="text" :v-model="search" class="form-control" id="search" placeholder="Search..."/>
      <div>
        <ul v-for="item in dataFiltered" :key="item.id">
         <li>item</li>
       </ul>
     </div>
 </template>

  <script>
     import ACTYPE from '../store/types/actions_types';
     import mapState , mapGetters from 'vuex';

     export default 
        name: 'home',
        created()
        this.$store.dispatch(ACTYPE.GET_MOVIES);
     ,
    data()
      return
        search: ''
      
    ,
    computed: 
      ...mapState(['topMovies' , 'loading']),
      ...mapGetters(['filterData']),

      dataFiltered()
        // parameter harcored
        return this.filterData("Sp")
      
    ,
   
  </script>

store/getters.js

export const getters = 
  TopMovies: (state) =>
    return state.topMovies.map(data =>
      return data
  );
 ,

filterData: (state) => (search) =>
  let query = new RegExp(search , 'i');
  console.log(query);
  //return state.topMovies.filter(data => data.name === query);    
  return state.topMovies.filter(data =>      
    return data.name.toLowerCase().includes(search.toLowerCase())
  )
 ,
;

【参考方案1】：

首先，您的:v-model="search" 应该只是v-model="search"。 :v-model 正在将值绑定到某个东西。

其次，我没有看到您将组件中的 search 传递给 Vuex 存储，然后将其应用于 getter。

---

这没有经过测试，我认为您不需要商店就可以使用它。您可能需要存储最多的是使用mapGetters 帮助器获取初始数据，并在这种情况下假设topMovies。

在您的计算属性中，您需要做的就是使用搜索查询字符串过滤数据。

例如

computed() 
  ...mapGetters(["topMovies"]),
  filteredData() 
    return this.topMovies.filter(movie => movie.name.toLowerCase().includes(this.search.toLowerCase()))
  

【讨论】：

嗨@Ru Chern Chong 出于某种原因，他在进行查询之前向我展示了所有数据。当我进行查询时，数据会被过滤。在将查询添加到搜索之前，有没有办法不显示任何数据？

这是可能的，这意味着您必须先将搜索查询存储在商店中，并在您的组件中调用它之前先在 getter 中直接对其进行过滤。