Vuex中dispatch传参无法在actions中被axios读取的原因排查

核心诱因分三类，按出现概率从高到低排列：

• 传参格式不符合Vuex dispatch规范
  Vuex的dispatch仅支持传入两个参数：第一个是action名称，第二个是单个payload载荷。如果传参时写了多个独立参数（例如dispatch('getList', dateVal, pageNum)），除了第一个参数外的所有内容都会被Vuex直接丢弃，action中根本拿不到对应的日期值，axios请求自然读不到参数。这种情况的修复方式是把所有要传的字段包裹在一个普通对象中作为payload传入。
• 传入的日期值是Vue响应式代理包装的对象
  如果你定义的日期变量挂载在组件data、ref/reactive等响应式上下文里，直接传递时实际传入Vuex的是Proxy代理对象，而非原始Date实例。axios内部序列化参数时无法正确解析Proxy包装的Date对象内部属性，会把对应字段序列化为空值。如果直接把日期字面量写在axios参数里，因为是普通原始值不存在代理包装，就能正常发起请求。
  修复方式：传参前先把Date对象转为普通可序列化值，比如调用toISOString()转成标准日期字符串、调用getTime()转成时间戳数字，或者用toRaw()取出原始Date实例再传递。
• 变量赋值时序/作用域异常
  如果let定义的日期变量在dispatch触发前还未完成赋值（比如日期选择器回调异步赋值、变量在子作用域被修改未同步到外层），dispatch传值时拿到的就是undefined，axios请求自然没有对应的日期参数。可以分别在dispatch调用前、action入口处打印传入的参数，快速定位是传参环节丢值还是action内部处理时丢值。

问题参考截图 #

正确写法示例 #

组件侧传参：

// 定义日期变量
let queryDate = new Date()
// 转为普通值后包裹为payload对象
const payload = {
  date: queryDate.toISOString(),
  pageSize: 10,
  pageNum: 1
}
// 正确传参
this.$store.dispatch('fetchTableData', payload)

Vuex action侧处理：

actions: {
  async fetchTableData({ commit }, payload) {
    // 入口打印确认参数
    console.log('action接收到的参数', payload)
    const { data } = await axios.get('/api/data/list', {
      params: payload
    })
    commit('SET_TABLE_DATA', data)
  }
}

快速排查技巧：如果不确定值在哪一步丢失，沿着「组件内dispatch前打印 -> action入口打印 -> axios请求拦截器打印请求参数」的链路打日志，1分钟就能定位丢值节点。

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