Vuex：如何正确调用动作？

Posted 2023-02-22

【中文标题】Vuex：如何正确调用动作？

【英文标题】：Vuex: How to properly call action?

【发布时间】：2017-07-24 03:14:14

【问题描述】：

我无法理解如何使用 Vuex 传递带有有效负载的操作。我知道我需要一个突变来改变状态，最好的做法是使用一个动作来调度这个突变。不知道我如何调用动作并传递参数。每当我尝试这个时，我都会收到错误：

“未捕获的类型错误：无法读取未定义的属性‘isComplete’”

// 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" />

【参考方案1】：

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

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

---

更多细节

这样想。

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

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