Vuex报错unknown action type: addTodo，请求协助解决

你的问题核心是Vuex的action与mutation职责混淆、命名不匹配，按以下步骤修正即可：

1. 修正store/index.js的结构 #

Vuex的核心规则：

• Actions：处理逻辑（如数据预处理、异步操作），最终提交Mutation
• Mutations：唯一允许直接修改State的地方，仅做同步数据变更

把你现有代码的action和mutation逻辑调换并修正：

import { createStore } from 'vuex'

export default createStore({
  state: {
    todos: [
      { id: 1, title: 'One' },
      { id: 2, title: 'Two' },
      { id: 3, title: 'Three' },
    ]
  },
  getters: {
    allTodos: (state) => state.todos,
  },
  mutations: {
    // Mutation直接接收state，负责修改数据
    ADD_TODO(state, todo) {
      state.todos.push(todo)
    }
  },
  actions: {
    // Action接收context，负责提交Mutation
    addTodo({ commit }, todoText) {
      // 先处理todo数据（比如生成唯一id）
      const newTodo = {
        id: Date.now(),
        title: todoText
      }
      commit('ADD_TODO', newTodo)
    }
  },
  modules: {}
})

2. 优化组件调用逻辑 #

你的TodoInput.vue里的mapActions(["addTodo"])是正确的，现在可以给点击事件加个小优化（空内容不提交、提交后清空输入框）：

<template>
  <div>
    <div class="row">
      <input v-model="todoText" class="col form-control mx-2" type="text" />
      <button @click="handleAddTodo" class="btn btn-primary">Add List</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'TodoInput',
  data() {
    return {
      todoText: ''
    }
  },
  methods: {
    ...mapActions(["addTodo"]),
    handleAddTodo() {
      if (!this.todoText.trim()) return // 过滤空内容
      this.addTodo(this.todoText)
      this.todoText = '' // 添加完成后清空输入框
    }
  }
}
</script>

错误根源说明 #

• 你之前把addTodo放在了mutations里，但组件调用的是action，导致Vuex找不到对应action类型
• mutation的写法错误：mutation第一个参数是state，不能用{ commit }，commit是action的专属方法
• 直接在action里修改state违反Vuex规范，必须通过mutation变更状态

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