Vue中如何对计算属性返回的Vuex Getter数据实现搜索过滤？

你的问题核心在于没搞清楚两个关键点：Array.filter()的特性，以及Vue计算属性的只读性。

为什么之前的方法无效？ #

1. filter()不会修改原数组：它只会返回一个符合条件的新数组，你直接调用this.returnlist.filter(...)后，既没有把这个新数组赋值给任何变量，也没有让模板去渲染它，所以控制台输出原数组是正常的——原数组根本没被改动。
2. 计算属性returnlist是依赖Vuex getter的派生值：它的取值完全由this.$store.getters[LIST]决定，你无法直接修改它的值，只能通过修改依赖源（也就是Vuex里的数据）或者基于它派生新的值。

推荐解决方案：用响应式搜索词结合计算属性（最符合Vue风格） #

这种方式不需要手动调用方法，只要搜索词变化，过滤结果会自动更新，非常适配Vue的响应式机制：

1. 先在组件的data里定义搜索关键词：

data() {
  return {
    searchKeyword: ''
  }
}

2. 修改你的计算属性，让它根据搜索词动态过滤：

computed: {
  returnlist() {
    // 先拿到Vuex中的原始数据
    const rawList = this.$store.getters[LIST];
    // 如果搜索词为空，直接返回原数组；否则执行过滤
    if (!this.searchKeyword) {
      return rawList;
    }
    // 这里用includes做模糊匹配，如果你需要精确匹配就用===
    return rawList.filter(el => el.name.includes(this.searchKeyword));
  }
}

3. 在模板里绑定搜索输入框，并渲染过滤后的结果：

<input v-model="searchKeyword" placeholder="输入名称搜索">
<ul>
  <li v-for="item in returnlist" :key="item.id">{{ item.name }}</li>
</ul>

如果你一定要用方法触发过滤 #

可以定义一个响应式变量来存储过滤后的结果，手动调用方法更新它：

1. 新增一个存储过滤结果的变量：

data() {
  return {
    filteredList: []
  }
}

2. 先在组件挂载时初始化过滤结果，同时监听原始数据的变化（防止Vuex数据更新后过滤结果不同步）：

computed: {
  // 单独把原始数据抽成计算属性，方便监听
  rawList() {
    return this.$store.getters[LIST];
  }
},
watch: {
  rawList(newList) {
    // 当Vuex里的数据变化时，重新执行过滤
    this.filteredList = newList.filter(el => el.name === "test");
  }
},
mounted() {
  // 初始化过滤结果
  this.filteredList = this.rawList.filter(el => el.name === "test");
}

3. 定义触发搜索的方法（比如点击按钮调用）：

methods: {
  search() {
    this.filteredList = this.rawList.filter(el => el.name === "test");
  }
}

4. 模板里渲染filteredList：

<button @click="search">搜索test</button>
<ul>
  <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>

总结 #

第一种方案更推荐，因为它完全利用Vue的响应式系统，自动处理数据更新和过滤，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者vuejsdev