筛选条件状态应存于Vuex store的state中，如assetFilters对象，通过mutations同步更新、actions封装重置与加载逻辑、getters提供计算属性，实现多组件共享响应。

在资产管理系统中，用 Vuex 集中存储筛选条件状态，核心是把“用户当前选了哪些分类、时间范围、状态标签、关键词”这类界面交互产生的参数，统一收口到 Store 的 state 中，并通过 mutations 同步更新、actions 支持重置或联动加载、getters 提供组合计算（比如是否所有筛选项为空），让多个资产列表页、导出组件、统计图表都能读取和响应同一份筛选状态。

筛选条件状态该存在哪？

不要分散写在各个组件的 data 或 computed 里。推荐在 Vuex store 的 state 中定义一个扁平或嵌套结构的对象，例如：

• assetFilters: { category: '', status: [], dateRange: [null, null], keyword: '', page: 1 } —— 扁平结构，易维护、易序列化
• 如果系统后期要支持多业务线（如IT设备、办公家具、车辆），可升级为嵌套：filters: { assets: {...}, contracts: {...} }
• 注意：初始值尽量设为语义明确的空值（''、[]、null），避免用 undefined，便于后续判断和重置

怎么安全地更新筛选条件？

所有修改都必须走 mutation，禁止直接 this.$store.state.assetFilters.xxx = ...。例如：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 定义 mutation：SET_ASSET_FILTERS(state, payload) { Object.assign(state.assetFilters, payload) }
• 组件中调用：this.$store.commit('SET_ASSET_FILTERS', { keyword: '服务器', status: ['in_use'] })
• 若需局部更新（比如只改 keyword），传入部分字段即可，Object.assign 会自动合并，不影响其他字段
• 重置筛选时，commit 一个空对象或预设的默认值对象，比如 { category: '', status: [], dateRange: [null, null], keyword: '' }

如何让不同页面共享并响应筛选变化？

不是“手动监听”，而是靠 Vue 响应式 + Vuex 自动触发更新：

• 在资产列表组件中，用 computed 直接读取：filters() { return this.$store.state.assetFilters }，模板里绑定 {{ filters.keyword }} 即可实时响应
• 导出按钮组件、高级搜索弹窗、筛选面包屑等，都同样读取这个 state，无需 props 传递或事件总线
• 如果需要“筛选后自动刷新列表”，在 mutation 更新后，对应组件 watch filters 或使用 getters 返回带防抖逻辑的派生状态，再触发 API 请求

要不要加 getters 和 actions？

实际项目中建议加上，提升可维护性：

• getters.hasActiveFilter：返回 Object.values(state.assetFilters).some(v => v !== '' && v != null && v.length !== 0)，用于控制“清空筛选”按钮显隐
• getters.activeFilterCount：统计当前启用的筛选项数量，显示小红点
• actions.resetFilters：封装重置逻辑，内部 commit 默认值，并可额外 dispatch 通知其他模块（如清空关联的表格排序）
• actions.loadFilteredAssets：整合筛选条件 + 分页 + loading 状态，实现“点击筛选即刷新”的闭环

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！