筛选条件状态应存于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 = ...。例如：
- 定义 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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
