javascript - 为什么我必须从一个模块传播 Vuex getter，而不是从另一个模块传播 Vuex getter？

Question

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

user.js 中的 getter 是:

重构

  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 中的 getter 是

    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 传播 getter 时这才有效？

Answer 1

const userShippingAddress = getters.selectedShippingAddress

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

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