Question

我有一个VueX商店，其中有两个模块，user.js和商人.js，顶层是index.js。

user.js中的吸气剂是：

重构

  const getters = {
  selectedShippingAddress (state) {
    return state
      .shippingAddresses.find(({ shippingAddressId }) => shippingAddressId 
      === state.selectedShippingAddressId)
     }
    }

旧版本

   selectedShippingAddress (state) {
    return state
      .shippingAddresses
      .filter(({ shippingAddressId }) => shippingAddressId === state.selectedShippingAddressId)
      .pop()
  }

merchant.js中的吸气剂是

    merchantAllowedShippingCountries (state) {
      if (state.shippingLocationProfiles) {
        return state.shippingLocationProfiles.split(',')
       } else {
         return []
        }
      }
     }

最后是index.js：

   isCountrySupportedByMerchant (state, getters) {

    **// the const userShippingAddress fails **
    const userShippingAddress = getters.selectedShippingAddress

    **// this works with spreading **
    const userShippingAddress = { ...getters.selectedShippingAddress }
    const countriesMerchantShipsTo = getters.countriesAllowedForShipping
    for (const country in countriesMerchantShipsTo) {
      if (userShippingAddress.countryCode === country) {
        return true
      }
    }
    return false
  }

我问这个问题是因为当不使用传播运算符时，该应用程序会失败以及进行集成测试。

user.js的两个版本，使用find的重构和使用pop（）的旧版本都在数组为空时返回undefined。我怀疑这与find（）使用回调而pop（）没有使用回调有关。还是这与属性访问有关，因为我需要在循环中获取countryCode？

为什么只有当我从user.js中传播吸气剂时，这才起作用？

Answer 1

const userShippingAddress = getters.selectedShippingAddress

当数组为空时，userShippingAddress将为undefined，因此userShippingAddress.countryCode将导致错误。

但是，当您从user.js传播getter时，{ ...getters.selectedShippingAddress }将是一个像{}这样的对象，因此userShippingAddress.countryCode会正常工作。

为什么我必须从一个模块传播Vuex吸气剂，而从另一个模块传播一个Vuex吸气剂？

1 个答案: