Vuex中mutation间返回值获取及action调用getter报错问题

问题1：如何在Vuex的一个mutation中获取另一个mutation的返回值？ #

Vuex的mutation设计初衷是同步修改state，本身不应该依赖返回值完成逻辑。如果需要复用逻辑或获取类似“返回值”的结果，推荐以下两种方式：

方式1：抽离公共逻辑为独立函数 #

把两个mutation共用的逻辑抽成单独的工具函数，让mutation调用这个函数并获取结果，同时保证state修改的逻辑统一：

// 抽离公共处理函数
const processState = (state, payload) => {
  state.targetState = payload
  return payload // 返回需要的结果
}

export const mutations = {
  mutationA(state, payload) {
    const result = processState(state, payload)
    // 基于result执行mutationA的额外逻辑
  },
  mutationB(state, payload) {
    const result = processState(state, payload)
    // 基于result执行mutationB的额外逻辑
  }
}

方式2：直接调用目标mutation函数（不推荐） #

如果必须在一个mutation里调用另一个并获取返回值，可以直接调用mutation函数（而非通过commit，因为commit不会返回mutation的返回值），但这种方式违背mutation的单一职责设计，谨慎使用：

export const mutations = {
  mutationB(state, payload) {
    state.someData = payload
    return payload // 这里返回值
  },
  mutationA(state, payload) {
    // 直接调用mutationB函数，传入state和参数
    const result = mutations.mutationB(state, payload)
    // 使用result执行后续操作
  }
}

问题2：action中调用getter报错getters.isCardLiked is not a function #

报错原因是Vuex的getter默认只接收state和其他getters作为参数，无法直接传递自定义参数（比如你的id）。要让getter支持传参，需要让getter返回一个函数，写法如下：

修改getter的定义：

export const getters = {
  // 改为返回一个接收id的函数
  isCardLiked: (state) => (id) => {
    const found = state.likedCards.find(likedCard => likedCard.id === id)
    console.log('found', found);
    return found
  }
}

修改后，action中getters.isCardLiked(id)就能正常调用，因为此时getters.isCardLiked是一个函数，调用时传入id即可执行查找逻辑。

内容的提问来源于stack exchange，提问作者Rustam Ravshanovich