Vuex Actions多参数传递的解决方案

// 定义 action
actions: {
  updateUser({ commit }, { id, name, email, role }) {
    commit('SET_USER', { id, name, email })
    api.updateRole(id, role)
  }
}

// 组件中调用
this.$store.dispatch('updateUser', {
  id: 123,
  name: '张三',
  email: 'zhangsan@example.com',
  role: 'admin'
})

// 定义 action
actions: {
  updateProduct({ commit }, { productId, data, options }) {
    // 直接使用解构后的变量
    commit('UPDATE_PRODUCT', { productId, ...data })
    if (options.notify) {
      showNotification('Product updated')
    }
  }
}

// 组件中调用
this.$store.dispatch('updateProduct', {
  productId: 'p123',
  data: { name: 'New Name', price: 99 },
  options: { notify: true }
})

// 创建柯里化 action
actions: {
  makeActionWithMultipleParams({ dispatch }, params) {
    return function(payload) {
      return dispatch('actualAction', { ...params, ...payload })
    }
  },
  actualAction({ commit }, { param1, param2, param3 }) {
    // 处理逻辑
  }
}

// 组件中使用
const actionWithFixedParams = this.$store.dispatch('makeActionWithMultipleParams', {
  param1: 'fixedValue'
})

// 后续调用只需传剩余参数
actionWithFixedParams({ param2: 'value2', param3: 'value3' })

// 定义 action
actions: {
  complexAction({ commit }, payloadFactory) {
    const { param1, param2, param3 } = payloadFactory()
    // 使用参数
  }
}

// 组件中调用
this.$store.dispatch('complexAction', () => ({
  param1: computeParam1(),
  param2: this.localValue,
  param3: getConfig().value
}))

// 定义参数接口
interface UpdatePayload {
  id: number
  changes: Partial<User>
  options?: {
    silent?: boolean
    validate?: boolean
  }
}

// 定义 action
actions: {
  updateUser({ commit }, payload: UpdatePayload) {
    if (payload.options?.validate) {
      validateUser(payload.changes)
    }
    commit('UPDATE_USER', { id: payload.id, changes: payload.changes })
  }
}

// 组件中调用
this.$store.dispatch('updateUser', {
  id: 123,
  changes: { name: 'New Name' },
  options: { validate: true }
} as UpdatePayload)

actions: {
  initializeMultiParamsAction({ dispatch }, initialParams) {
    return {
      execute: (runtimeParams) => dispatch('executeAction', { ...initialParams, ...runtimeParams }),
      withOption: (options) => dispatch('initializeMultiParamsAction', { ...initialParams, options })
    }
  },
  executeAction({ commit }, allParams) {
    // 处理所有参数
  }
}

// 组件中使用
const action = this.$store.dispatch('initializeMultiParamsAction', { baseUrl: '/api' })
action.withOption({ cache: true }).execute({ id: 123 })

actions: {
  updateItem({ commit }, payload) {
    if (!payload.id || !payload.data) {
      throw new Error('Invalid payload structure')
    }
    // 正常处理
  }
}

function normalizeUserParams(rawParams) {
  return {
    id: parseInt(rawParams.id, 10),
    ...rawParams
  }
}

actions: {
  updateUser({ commit }, rawParams) {
    const params = normalizeUserParams(rawParams)
    // 使用标准化后的参数
  }
}