Vue中格式化日期赋值Props遇ESLint副作用报错求助

你遇到的ESLint错误Unexpected side effect in computed function，核心原因是计算属性（computed）不允许包含修改响应式状态的副作用操作。计算属性的设计初衷是作为纯函数：仅依赖输入的响应式数据返回结果，不能直接修改数据。你在FormatedDateNaissance里直接修改DataAgent.date_naissance.value，违反了这个原则。

另外，直接修改props传递的对象（props.BlocAgent）也不符合Vue的单向数据流规范，虽然用reactive包装后能修改，但可能导致父组件状态意外变更，引发调试问题。

我们需要用watch来处理日期格式化的副作用逻辑，同时创建本地响应式状态来维护组件内的日期值，避免直接修改props。

步骤1：创建本地响应式状态，避免直接修改props #

将props传递的BlocAgent深拷贝为本地响应式对象，确保组件内的修改不会直接影响父组件：

const props = defineProps({
  BlocAgent: Object,
  FormColor: String,
  ActionForm: String
})

// 深拷贝props对象，创建本地响应式状态
const DataAgent = reactive({
  ...structuredClone(props.BlocAgent),
})

// 如果需要将修改同步回父组件，定义emit
const emit = defineEmits(['update:BlocAgent'])

步骤2：用watch处理日期格式化逻辑 #

监听DataAgent.date_naissance的变化，当值存在且包含时间部分时，自动去除时间并更新：

watch(() => DataAgent.date_naissance, (newDate) => {
  if (newDate && newDate.includes(' ')) {
    // 去除时间部分，保留日期
    const formattedDate = newDate.split(' ')[0]
    // 更新本地状态
    DataAgent.date_naissance = formattedDate
    // 如果需要同步给父组件，触发emit
    emit('update:BlocAgent', structuredClone(DataAgent))
  }
}, { immediate: true }) // immediate: true 确保组件初始化时就执行一次格式化

步骤3：移除错误的computed函数 #

不再需要原来的FormatedDateNaissance计算属性，q-input直接绑定本地的DataAgent.date_naissance即可：

<q-input
  dense
  :disable="DisableDateNaissance"
  clearable
  clear-icon="close"
  :color="DataFormColor"
  type="date"
  v-model="DataAgent.date_naissance"
  lazy-rules
  :rules="[dateNaissNullRule, dateNaissRule]"
/>

• structuredClone是现代浏览器支持的深拷贝方法，如果需要兼容旧环境，可以用JSON.parse(JSON.stringify(props.BlocAgent))替代。
• watch的immediate: true选项很重要，确保组件初始化时，后端返回的带时间的日期能被自动格式化。
• 如果你不需要同步修改到父组件，可以省略emit相关代码，但建议始终遵循单向数据流规范，通过emit通知父组件更新状态。

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