Vue3+Vuex4.0环境下Mutation中如何替代Vue.set更新数组对象属性

Vuex 4是专门为适配Vue3重构的版本，其内部管理的state会被Vue3基于Proxy的响应式系统包裹，完全不存在Vue2时代因Object.defineProperty机制限制导致的“数组索引赋值不响应、对象新增属性不响应”的问题，不需要依赖Vue.set这类全局API完成状态更新。

你当前代码不生效的核心原因和Vue.set无关：你在Mutation中拷贝生成了独立的song临时对象，修改完临时对象的isFavorite属性后，根本没有把修改后的内容回写到state.songs的对应位置，这类局部变量的修改不会触发任何响应式更新。

你可以直接选用以下两种符合Vue3响应式规则的实现方式，替换原有Mutation逻辑：

• 索引替换法（和你原有逻辑的修改路径最贴近）
  找到匹配目标歌曲的数组索引后，直接把修改后的对象回写到数组对应位置即可：

  updateSongFavorite(state, { songId, val }) {
    const index = state.songs.findIndex((song) => song.id === songId);
    if (index !== -1) {
      // 拷贝原对象完成属性修改后，直接回写到数组对应索引
      state.songs[index] = {
        ...state.songs[index],
        isFavorite: val
      }
    }
  }
  

• 直接属性修改法（代码更简洁，无额外对象拷贝开销）
  不需要拷贝整个歌曲对象，直接定位到匹配的目标歌曲实体，修改其属性即可，Vue3的Proxy机制会自动追踪这类属性变更：

  updateSongFavorite(state, { songId, val }) {
    const targetSong = state.songs.find((song) => song.id === songId);
    if (targetSong) {
      // 直接修改对象属性，原生触发响应式更新
      targetSong.isFavorite = val
    }
  }
  

额外说明：

• 你项目入口文件里createApp初始化、app.use(store)挂载的写法完全符合Vuex4的集成规范，不存在层面对接的问题
• 无需照搬Vue2时代的Vue.set/this.$set逻辑，Vue3环境下既没有全局Vue构造器，这类API也完全没有存在的必要

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