调用Vuex的addNews方法时第二个参数不生效问题

核心问题 #

Vuex Action的参数定义错误，Action方法仅支持单个payload参数，你当前拆分的title和body两个参数无法被正确接收。当组件调用this.addNews(this.title, this.body)时，Action中的body参数实际为undefined，导致axios请求并未正确传递body数据，最终存入Vuex State的新数据中body字段异常（或被接口默认填充为空）。

修复步骤 #

1. 修改Vuex中的Action方法

将参数改为单个payload对象（可解构为title和body）：

async addNews({ commit }, { title, body }) {
  const response = await axios.post(
    `https://jsonplaceholder.typicode.com/posts`,
    { title, body }
  );
  commit("addNews", response.data);
},

如果需要兼容更灵活的传参，也可以保留payload对象不解构：

async addNews({ commit }, payload) {
  const response = await axios.post(
    `https://jsonplaceholder.typicode.com/posts`,
    { title: payload.title, body: payload.body }
  );
  commit("addNews", response.data);
},

2. 修改组件中的调用方式

传递包含title和body的对象给Action：

onSubmit() {
  this.addNews({ title: this.title, body: this.body });
  this.title = "";
  this.body = "";
},

3. 额外检查（可选）

确保你的Mutation方法addNews正确将新数据添加到State数组中，示例：

mutations: {
  addNews(state, newsItem) {
    state.newsList.push(newsItem);
  }
}

同时确认渲染数据的组件中，正确读取了body字段，比如：

<div v-for="item in newsList" :key="item.id">
  <h3>{{ item.title }}</h3>
  <p>{{ item.body }}</p>
</div>

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