Vuex：如何正确调用动作？

Question

我无法理解如何使用 Vuex 通过负载传递操作。我知道我需要一个突变来改变状态，并且最好的做法是使用一个动作来发送突变。不确定我如何调用操作并传入参数。每当我尝试这个时，我都会收到错误消息：

"Uncaught TypeError: Cannot read property 'isComplete' of undefined"

// Store.js
const mutations = {
  completeTodo: function (state, todo) {
    console.log(todo)
    todo.isComplete = todo.isComplete || false
    state.toggleAll = false
  }
}

const actions = {
  completeTodo: ({commit}) => commit('completeTodo')
}

//Todo.vue

 methods: {
  ...mapActions([
    'completeTodo'
  ])
}

 <input type="checkbox" name="isCompleted" " v-on:change="completeTodo(todo)" class="todoCheck" />

Answer 1

您的操作应采用第二个参数，即您在组件中传递的有效负载。

const actions = {
  completeTodo: ({commit}, todo) => commit('completeTodo', todo)
}

更多详情

这样想。

Component => 知道 todo 和一个 completeTodo 函数（这是 vuex mapActions 提供的动作）。它无需了解商店或任何功能即可完成工作。

mapActions => 生成一个 'smart' completeTodo 函数，负责处理存储中要调用的特定函数以及正确调用它的参数顺序。

Vuex：如何正确调用动作？

Vuex: How to properly call action?

javascript

vue.js

vuex