Vue3中Vuex使用Vue.set报错：vuex__WEBPACK_IMPORTED_MODULE_3__.default.set不是函数

错误原因 #

1. 导入错误：你在store-coach.js里错误地将vuex导入为Vue，导致调用Vue.set时找不到该方法——这里的Vue实际上是vuex模块，并非Vue框架本身。
2. Vue3无需Vue.set：Vue3的响应式系统基于Proxy，动态给对象添加属性时不需要借助Vue.set，直接赋值就能保持响应式。

修正步骤 #

1. 修正导入语句 #

修改store-coach.js的第一行，删除错误的Vue导入：

// store-coach.js
// 移除错误导入：import Vue from 'vuex'
import { uid, Notify } from 'quasar'
import firebase from 'boot/firebase'

2. 修改mutations中的addCoach方法 #

直接给state.coaches添加属性即可，无需Vue.set：

const mutations = {
  addCoach(state, coach) {
    // 直接赋值，Vue3 Proxy会自动处理响应式
    state.coaches[coach.id] = coach.coach
  }
}

额外验证 #

确认你的Vuex版本为4.x（适配Vue3的版本），旧版本可能存在兼容性问题，建议升级到对应版本。

修改完成后，即可将子对象正确存入state.coaches并保持响应式，视图能正常展示教练列表。

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