Quasar组件@click调用Vuex mapActions失效且报状态非法变更错误求助

两个异常是强关联的，并非独立故障：

• 越权修改state的报错来源：Case.vue接收的propc是来自Vuex store的引用类型对象，模板内<q-checkbox v-model="c.completed" />直接对prop属性做双向绑定，操作勾选框时会绕过mutation流程直接修改原store的state值，在strict开发模式下必然触发Vuex的越权修改警告。
• updateCase action不触发的原因：上述越权修改抛出的同步异常会打断Vue组件的事件执行上下文，导致绑定在q-item上的点击回调无法正常进入执行链路，因此action内部的console.log不会正常输出。

• 移除子组件内的prop双向绑定逻辑
  遵循单向数据流原则，不直接对传入的prop对象做v-model绑定，将勾选框的双向绑定改为单向传值+事件通知的形式，避免直接修改引用源。同时给checkbox加@click.stop修饰符，阻止勾选操作的事件冒泡触发外层q-item的点击逻辑：

  <!-- 修正后checkbox写法 -->
  <q-checkbox 
    :model-value="c.completed" 
    @update:model-value="handleCheckboxChange"
    @click.stop
  />
  

  组件内补充对应处理方法：

  methods: {
    ...mapActions('cases', ['updateCase']),
    handleCheckboxChange(newVal) {
      // 将修改需求通过自定义事件抛给父组件，由父组件统一处理状态更新
      this.$emit('update-case-complete', {
        id: this.id,
        completed: newVal
      })
    }
  }
  

• 父组件统一处理Vuex状态更新
  父组件接收到Case.vue抛出的自定义事件后，通过dispatch对应action、commit对应mutation的标准流程更新store内的case数据，禁止在子组件或action内部直接修改state值。
• 验证action映射链路
  当前代码中mapActions('cases', ['updateCase'])的命名空间映射写法符合Vuex规范，不存在配置错误。移除越权修改的逻辑后，点击q-item时即可正常触发映射的action方法，内部的console.log会正常输出。

• Vuex的strict模式仅在开发环境启用，会自动校验所有state变更是否经过mutation流程，生产环境默认关闭该校验。
• 传递引用类型的prop时，子组件不得直接修改prop本身或其嵌套属性，所有状态变更必须通过事件通知父组件处理。

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