嗨,我得到了这样的错误

[Vuex]未知的行动类型:addodo

我是Vue js的新手,现在我正在学习,请帮我解决这个问题.

代码是这样的

存储/索引.js公司

 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: {
    addTodo({ commit }, todo){
      commit("add_todo", todo)
    }
  },
  actions: {
    add_todo(state, todo){
      state.todos.push(todo)
      console.log(todo);
    }
  },
  modules: {
  }
})

还有今天.代码视图为

  <template>
    <div>
        <div class="row">
        <input v-model="todoText" class="col form-control mx-2" type="text" />
        <button @click="addTodo(todoText)" 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"])
}
}
</script>

我如何解决上述问题?

推荐答案

在您的store/index.js文件中进行以下给定更改:

mutations: {
    add_todo: (state, todo) => state.todos.push(todo),
},

actions: {
    addTodo({ commit }, todo){
        commit("add_todo", todo)
    }
},

Vue.js相关问答推荐

Nuxt 3 I18N浏览器检测不起作用

在预渲染模式下部署 nuxt 3 时出错

Vue 3:插槽属性 - 可以通过 props 传递数据吗?

vue : 多个样式的类绑定在一个

纵横比元素溢出容器

Vue3如何将自定义事件绑定到路由视图中的特定组件?

使用 Nuxt 动态获取文件夹中的图像路径

如何在 vue 路由中导航到 Bootstrap-vue 选项卡中的特定选项卡?

如果 Vuetify 自动完成没有匹配的结果,则保留输入的文本

在 Vue 文件中创建根 Vue 实例

我可以在未注册的组件上构建 Vue.js 失败吗?

在组件上的 Vue 3 中获取 URL 查询参数

如何将 axios/axios 拦截器全局附加到 Nuxt?

如何从 vue.js 中的自定义组件中冒泡点击事件?

是否可以在 vue-devtools 中命名 Vue 实例?

我可以避免使用 Vue.js 组件的重复样式吗?

try 通过 Vue.js 中的渲染传递props并观察它们

如何在 Vue.js 中延迟 @keyup 处理程序

Vue v-model 不响应 BS4 单选按钮组

居中 v-toolbar-title