将 Getter 传递给 Vuex Action 返回 null答案

【问题标题】：Passing Getter to Vuex Action returns null将 Getter 传递给 Vuex Action 返回 null
【发布时间】：2021-12-11 02:06:47
【问题描述】：

我正在尝试将一个 getter 传递给我的异步操作，它的控制台日志很好，但是调用 apollo 突变的等待一直将其视为空值，而它只是将一个真实值打印到控制台... 我还使用vuex-persisted-state 来保持存储数据的活力。因此，在执行操作时，cartId 状态不为空……因此控制台正确记录了 cartId 值。

状态：

  cartId: null, //initially null, is set with mounted in another component

吸气剂：

  getCartId(state) {
    return state.cartId
  },

行动：

  async getCartItems({ commit, getters }) {
    let getCartId = getters.getCartId
    console.log(getCartId) // returns: Z2lkOi8vc2hvcGlmeS9DYXJ0LzBhMDIxNDQ2ODQ0ZDU1MGRhZmZmMWJjZTIzNTBhNDY4
    const { data } = await this.app.apolloProvider.defaultClient.query({
      query: getCart,
      variables() {
        return {
          cartId: getCartId
        }
      },
      skip() {
        return !getCartId
      }
    })
  },

控制台错误： Uncaught (in promise) Error: GraphQL error: Variable $cartId of type ID! was provided invalid value

GraphQL 响应：Expected value to not be null

编辑： 问题似乎在于变量如何传递给我的查询

【问题讨论】：

可能是因为加载其他组件的延迟。您仍然可以在控制台上看到它，因为该值将在控制台中使用新更改进行更新。要对此进行调试，请在 console 行上添加一个断点并通过将鼠标悬停在 getCartId 上进行检查

标签： vue.js async-await graphql vuex apollo-client

【解决方案1】：

通过使 variables 不是我等待中的函数来修复...

async getCartItems({ commit, getters }) {
    const getCartId = await getters.getCartId
    const { data } = await this.app.apolloProvider.defaultClient.query({
      query: getCart,
      variables: {
        cartId: getCartId
      },
      skip() {
        return !getCartId
      }
    })
    if (data.cart) {
      commit('updateCartObj', data.cart)
    } else {
      console.log('getCartItems Error' + data)
    }
  },

【讨论】：