Pinia Getters 适合封装文本截断逻辑:①基础截断用无参 getter 实现固定长度+省略号;②语义化截断按词完整断开;③带参 getter 支持动态长度与后缀;④可复用其他 getter 实现条件判断。

Pinia Getters 本身不直接处理文本截断或摘要生成,但它非常适合封装这类逻辑——把字符串加工规则集中定义、响应式触发、自动缓存,避免在组件里重复写 text.substring(0, 50) + '...' 这类硬编码。
基础截断:固定长度 + 省略号
适合标题、简介等需统一展示长度的场景。用无参 getter 最简洁:
- 写法示例:shortTitle: (state) => state.title?.substring(0, 30) + (state.title?.length > 30 ? '...' : '')
- 注意保留空值安全(
?.)和边界判断,避免undefined.substring报错 - 调用时直接
store.shortTitle,修改state.title后自动更新
语义化截断:按字数/字符数 + 保证词完整
比简单 substring 更友好,比如不把“JavaScript”截成“JavaS…”。可用 getter 封装逻辑:
- 写法示例:summaryText: (state) => { const text = state.content || ''; const maxLength = 100; if (text.length 0 ? truncated.slice(0, lastSpace) + '...' : truncated.slice(0, maxLength - 3) + '...'; }
- 这样既控制长度,又尽量在空格处断开,提升可读性
- 逻辑收在 store 内,组件无需关心“怎么截”,只管用
summaryText
带参摘要:支持动态长度与策略
当不同模块需要不同截断长度(如卡片用 60 字、列表用 120 字),用参数化 getter:
- 写法示例:truncate: (state) => (maxLength = 80, suffix = '…') => { const text = state.content || ''; if (text.length
- 调用方式:
store.truncate(60)或store.truncate(120, '(展开)') - ⚠️ 注意:Pinia 不为不同参数自动缓存结果。若高频调用且参数组合少(如只用 60/120/200),影响不大;若参数随意(如传毫秒时间戳),建议搭配
lodash.memoize或用 computed 包一层
结合状态做条件摘要
摘要逻辑可依赖其他 state 字段,比如“仅对长于 200 字的内容截断”:
- 写法示例:displayContent: (state) => { return state.content?.length > 200 ? state.content.substring(0, 150) + '...' : state.content; }
- 也可复用其他 getter:hasLongContent() { return this.content?.length > 200 },再在
displayContent()中通过this.hasLongContent判断 - 这种拆分让逻辑更清晰,也利于 Pinia 分别缓存中间结果


















