将 Getter 传递给 Vuex Action 返回 null

Posted 2023-03-08

【中文标题】将 Getter 传递给 Vuex Action 返回 null

【英文标题】：Passing Getter to Vuex Action returns 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 上进行检查

【参考方案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)
    
  ,