使用Vuex实现列表搜索栏时过滤后列表无法渲染问题求助

问题原因 #

核心错误是Vuex中filteredUploaders getter没有返回过滤结果：你编写的箭头函数使用花括号包裹函数体时，没有显式添加return语句，导致该getter始终返回undefined，最终filtered计算属性拿到空值，列表无法正常渲染。

修复方案 #

修改consumer.js中的filteredUploaders getter，两种方式二选一即可：

const getters = {
  consumerUploaders: (state) => state.uploaders,
  // 方式1：删除花括号，箭头函数直接返回过滤结果
  filteredUploaders: (state) => (target) => state.uploaders.filter(uploader => 
    uploader.nome.toLowerCase().startsWith(target.toLowerCase())
  )

  // 方式2：保留花括号，显式添加return语句
  // filteredUploaders: (state) => (target) => {
  //   return state.uploaders.filter(uploader => 
  //     uploader.nome.toLowerCase().startsWith(target.toLowerCase())
  //   )
  // }
};

可选优化 #

如果你需要实现全字段模糊搜索而非前缀匹配，可以把过滤逻辑中的startsWith替换为includes。

你之前使用consumerUploaders可以正常渲染，说明store注册、fetchUploaders action修改state的逻辑都是正常的，修改getter后功能即可正常运行。

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