Vuex+TypeScript报错TS2322：Mutation类型不兼容问题求助

错误原因 #

Vuex的Mutation函数只能接收两个参数：第一个是状态对象state，第二个是可选的payload（可以是单个值或复合对象）。你定义的addEx mutation使用了三个参数，不符合Vuex Mutation的类型约束，因此触发TS2322类型不匹配错误。另外removeEx中使用的Number是构造函数类型，TypeScript中应该用小写的number基本类型。

解决方案 #

将addEx的多个参数合并为一个payload对象，同时为payload定义明确的TypeScript类型，确保类型检查严谨性，同时修正removeEx的参数类型。

修改后的完整代码 #

import { createStore } from "vuex";
import { State } from "./Types";

// 为addEx的payload定义类型
interface AddExPayload {
  exRep: number;
  exName: string;
}

const store = createStore<State>({
  state() {
    return {
      exercices: []
    };
  },
  mutations: {
    // 使用payload对象传递多个参数
    addEx(state: State, payload: AddExPayload) {
      const exId = checkid(); // 假设checkid是已定义的生成ID的函数
      state.exercices.push({ 
        rep: payload.exRep, 
        name: payload.exName, 
        id: exId 
      });
    },
    // 修正参数类型为number（小写基本类型）
    removeEx(state: State, exoId: number) {
      console.log(exoId);
      state.exercices = state.exercices.filter(obj => obj.id !== exoId);
    }
  }
});

export default store;

调用mutation时的传参方式 #

在组件中调用addEx时，需要传递符合AddExPayload类型的对象：

// 示例：在组件中提交mutation
this.$store.commit('addEx', { exRep: 10, exName: '俯卧撑' });

补充说明 #

• Vuex限制mutation参数数量是为了保证状态变更的可追踪性，所有变更参数都能通过payload统一管理。
• 为payload定义TypeScript类型可以避免传参错误，同时提升代码的可读性和维护性。

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