Write operation failed: computed value is readonly问题解决

源代码：

// 封装倒计时逻辑函数
import { computed, ref } from 'vue'
import dayjs from 'dayjs'
export const useCountDown = () => {// 1.响应式数据const time = ref(0)// 格式化时间const formatTime = computed(()=>dayjs.unix(time.value).format('mm分ss秒'))// 2.开始倒计时的函数const start = (currentTime) => {// 倒计时逻辑formatTime.value = currentTime setInterval(() => {formatTime.value--}, 1000);}return {formatTime,start}
}

解析：

上述代码中的错误 Write operation failed: computed value is readonly 是因为尝试直接修改一个 computed 属性的值。在 Vue 3 中，computed 属性是只读的，不能直接给它赋值。修复这个问题，需要通过修改底层响应式数据来影响 computed 属性的值。在useCountDown 钩子中，直接修改 time 引用的值，而不是尝试修改 formatTime。formatTime 会根据 time 的变化自动更新。

更改后代码：

将上述代码中待修改的formatTime该为time即可，用time改变，formatTIme承接数据

import { ref, computed, onUnmounted } from 'vue';  
import dayjs from 'dayjs';  export const useCountDown = () => {  // 1. 响应式数据  const time = ref(0); // 倒计时秒数  // 2. 计算属性，用于格式化时间  const formatTime = computed(() => dayjs.unix(time.value).format('mm:ss'));  // 3. 开始倒计时的函数  const start = (totalSeconds) => {  time.value = totalSeconds; // 设置初始倒计时时间  const intervalId = setInterval(() => {  if (time.value > 0) {  time.value--; // 每秒减少1  } else {  clearInterval(intervalId); // 时间到，清除定时器  }  }, 1000);  // 组件卸载时清除定时器  onUnmounted(() => {  clearInterval(intervalId);  });  };  // 4. 重置倒计时的函数  const reset = (totalSeconds) => {  time.value = totalSeconds; // 重置倒计时时间  };  return {  formatTime,  start,  reset // 可以选择性地暴露 reset 函数  };  
};