如何修改Vuex getter获取的日期变量并作为prop传入子组件

你之前尝试在模板绑定里写的表达式不生效，核心原因是引号嵌套冲突：:value1 的属性值本身是用双引号包裹的，你在表达式内部写split("T")又用了双引号，会让Vue解析属性时提前截断字符串，根本无法正确执行完整的表达式，自然拿不到预期结果。

针对这个场景，有三种可落地的处理方式：

• 快速修正模板内的表达式
  把表达式内部的双引号换成单引号，规避引号冲突即可正常运行：

  :value1="value.updated.toISOString().split('T')[0]"
  

  但这种方式不建议长期使用，模板表达式的设计定位是处理简单运算，嵌套多层的复杂逻辑塞在模板里会大幅降低代码可读性。
• 在computed计算属性层做格式转换
  你之前觉得script中无法直接获取value变量是认知误区：mapGetters的作用就是把Vuex的getter直接映射为当前组件的computed属性，这些属性是挂载在组件实例上的，不管在computed、methods还是生命周期钩子里，都可以通过this.value正常访问。你完全可以在同一个computed块中，新增专门的转换逻辑引用已映射的value：

computed: {
  // 保留原有Vuex getter映射
  ...mapGetters(["value"]),
  // 新增格式化后的日期计算属性
  formattedUpdated() {
    // 增加空值兜底，避免Vuex异步数据未加载完成时调用日期方法抛错
    if (!this.value?.updated) return ''
    return this.value.updated.toISOString().split('T')[0]
  }
}

模板传参时直接绑定这个新的计算属性即可：

<Card
  title="Updated"
  :value1="formattedUpdated"
/>

• 通用逻辑抽离复用
  如果这个日期格式化逻辑需要在项目多个组件中使用，可以把转换逻辑抽成独立的工具函数，在计算属性、模板表达式甚至其他逻辑块中直接调用，避免重复编写相同代码。

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