面试题：Vuex 使用 actions 时不支持多参数传递怎么办？

在 Vuex 中，actions 是通过 dispatch 方法触发的，而 dispatch 只支持两个参数：

第一个参数：type，表示要触发的 action 名称。
第二个参数：payload，表示传递给 action 的数据。

如果需要传递多个参数，可以通过以下方式解决：

1. 使用对象传递多个参数

将多个参数封装到一个对象中，作为 payload 传递。

示例代码

// 触发 action
this.$store.dispatch('myAction', {
  param1: 'value1',
  param2: 'value2',
});

// 定义 action
const store = new Vuex.Store({
  actions: {
    myAction({ commit }, payload) {
      const { param1, param2 } = payload;
      console.log(param1, param2); // 输出: value1 value2
    },
  },
});

优点：简单直观，适合少量参数。
缺点：参数较多时，对象结构可能显得臃肿。

2. 使用解构赋值

在 action 中通过解构赋值提取参数。

示例代码

// 触发 action
this.$store.dispatch('myAction', {
  param1: 'value1',
  param2: 'value2',
});

// 定义 action
const store = new Vuex.Store({
  actions: {
    myAction({ commit }, { param1, param2 }) {
      console.log(param1, param2); // 输出: value1 value2
    },
  },
});

优点：代码简洁，适合少量参数。
缺点：参数较多时，解构赋值可能显得冗长。

3. 使用柯里化（Currying）

通过柯里化将多个参数分步传递。

示例代码

// 定义 action
const store = new Vuex.Store({
  actions: {
    myAction({ commit }) {
      return function (param1) {
        return function (param2) {
          console.log(param1, param2); // 输出: value1 value2
        };
      };
    },
  },
});

// 触发 action
this.$store.dispatch('myAction')('value1')('value2');

优点：灵活，适合需要分步传递参数的场景。
缺点：代码复杂度较高，可读性较差。

4. 使用数组传递多个参数

将多个参数封装到数组中，作为 payload 传递。

示例代码

// 触发 action
this.$store.dispatch('myAction', ['value1', 'value2']);

// 定义 action
const store = new Vuex.Store({
  actions: {
    myAction({ commit }, payload) {
      const [param1, param2] = payload;
      console.log(param1, param2); // 输出: value1 value2
    },
  },
});

优点：适合参数类型相同或顺序固定的场景。
缺点：参数较多时，数组索引可能难以维护。

5. 使用命名参数

通过对象传递命名参数，提高代码可读性。

示例代码

// 触发 action
this.$store.dispatch('myAction', {
  param1: 'value1',
  param2: 'value2',
});

// 定义 action
const store = new Vuex.Store({
  actions: {
    myAction({ commit }, { param1, param2 }) {
      console.log(param1, param2); // 输出: value1 value2
    },
  },
});

优点：代码可读性强，适合参数较多或需要命名的场景。
缺点：需要额外定义对象结构。

6. 使用辅助函数

通过辅助函数封装参数传递逻辑。

示例代码

// 辅助函数
function dispatchMyAction(store, param1, param2) {
  store.dispatch('myAction', { param1, param2 });
}

// 触发 action
dispatchMyAction(this.$store, 'value1', 'value2');

// 定义 action
const store = new Vuex.Store({
  actions: {
    myAction({ commit }, { param1, param2 }) {
      console.log(param1, param2); // 输出: value1 value2
    },
  },
});

优点：逻辑封装，适合复用。
缺点：需要额外定义辅助函数。

总结

方法	优点	缺点	适用场景
使用对象传递多个参数	简单直观	参数较多时对象结构臃肿	少量参数
使用解构赋值	代码简洁	参数较多时解构赋值冗长	少量参数
使用柯里化	灵活，适合分步传递参数	代码复杂度高，可读性差	需要分步传递参数的场景
使用数组传递多个参数	适合参数类型相同或顺序固定的场景	参数较多时数组索引难以维护	参数类型相同或顺序固定的场景
使用命名参数	代码可读性强	需要额外定义对象结构	参数较多或需要命名的场景
使用辅助函数	逻辑封装，适合复用	需要额外定义辅助函数	需要复用的场景