Vuex Action 如何向 Mutation 传递多个参数？

2024-03-30 14:07:11

使用 Vuex Action 向 Mutation 传递多个参数

引言

Vuex 是 Vue.js 的一个状态管理库，它提供了一个集中式存储，用于管理应用程序的状态。Mutation 是改变状态的唯一途径，而 Action 则负责触发 Mutation。在某些情况下，我们需要在 Action 中向 Mutation 传递多个参数。本文将探讨如何使用 Vuex Action 向 Mutation 传递多个参数，并提供一个示例来说明如何完成此操作。

传递多个参数的方法

有两种主要方法可以将多个参数从 Action 传递给 Mutation：

使用对象：
- 将参数封装在一个对象中，并将该对象作为 Payload 传递给 Mutation。
- 优点： 清晰简洁，易于理解。
- 缺点： 对于大量参数可能不太灵活。
使用数组：
- 将参数作为数组元素传递给 Mutation。
- 优点： 更灵活，可以传递任意数量的参数。
- 缺点： 对于少量参数可能不太清晰。

代码示例

使用对象传递参数：

// store.js
mutations: {
  authenticate(state, payload) {
    const { token, expiration } = payload;
    // ...
  }
},
actions: {
  authenticate: ({ commit }, token, expiration) => {
    commit('authenticate', { token, expiration });
  }
}

// login method
login() {
  // ...
  this.$store.dispatch({
    type: 'authenticate',
    token: response.body.access_token,
    expiration: response.body.expires_in + Date.now()
  });
}

使用数组传递参数：

// store.js
mutations: {
  authenticate(state, [token, expiration]) {
    // ...
  }
},
actions: {
  authenticate: ({ commit }, token, expiration) => {
    commit('authenticate', [token, expiration]);
  }
}

// login method
login() {
  // ...
  this.$store.dispatch({
    type: 'authenticate',
    token: response.body.access_token,
    expiration: response.body.expires_in + Date.now()
  });
}