为什么Nuxt SSR项目中getComputedStyle配合Vuex使用无法正常工作？

• 刷新时setHeight不执行/返回预设默认值：SSR模式下刷新页面会先走服务端渲染流程，若你将setHeight放在常规的mounted钩子中，此时Vuex中的异步数据可能还未完成加载、DOM还未根据最新的Vuex数据渲染完成，读取到的高度是数据未填充时的默认高度。而路由跳转属于纯客户端行为，此时Vuex数据已经加载完成，DOM渲染时序符合预期，所以计算正常。
• 写死数据时功能正常：静态数据在组件初始化阶段就存在，DOM渲染时直接生成完整内容，高度计算时能拿到真实渲染后的高度。

1. 调整setHeight触发时机 #

确保在Vuex数据加载完成、DOM更新后再执行高度计算：

• 首先用asyncData/fetch接口在SSR阶段就完成Vuex数据的拉取，保证客户端hydrate时数据已经存在
• 用watch监听Vuex对应数据源，数据变化时触发高度计算，配合$nextTick等待DOM更新完成
• 用process.client判断包裹DOM操作逻辑，避免服务端执行时报错

async asyncData({ store }) {
  // 提前拉取Vuex数据，SSR阶段完成数据填充
  if (!store.state.你的模块名.对应列表数据) {
    await store.dispatch('你的模块名/拉取数据的action名')
  }
},
mounted() {
  if (process.client) {
    this.$nextTick(() => this.setHeight())
    // 可选：监听窗口变化自动重算高度
    window.addEventListener('resize', this.setHeight)
  }
},
watch: {
  // 监听Vuex数据源，数据变化自动重算
  '$store.state.你的模块名.对应列表数据': {
    immediate: true,
    handler() {
      this.$nextTick(() => this.setHeight())
    }
  }
},
beforeDestroy() {
  if (process.client) {
    window.removeEventListener('resize', this.setHeight)
  }
}

2. 优化高度计算逻辑 #

避免自定义属性默认值干扰真实高度计算，计算前先重置高度为auto，用requestAnimationFrame等待浏览器重排完成后再取值：

methods: {
  setHeight() {
    const columns = document.querySelectorAll('.你的列容器类名')
    // 先重置自定义属性为auto，获取真实内容高度
    columns.forEach(col => {
      col.style.setProperty('--equHeigth', 'auto')
    })
    // 等待浏览器重排完成后计算高度
    requestAnimationFrame(() => {
      let maxHeight = 0
      columns.forEach(col => {
        const colHeight = parseFloat(getComputedStyle(col).height)
        maxHeight = Math.max(maxHeight, colHeight)
      })
      // 赋值最终等高值
      columns.forEach(col => {
        col.style.setProperty('--equHeigth', `${maxHeight}px`)
      })
    })
  }
}

3. 备选CSS方案（无JS性能损耗） #

如果没有特殊的滚动、交互需求，直接用Flex布局原生实现两列等高，不需要JS计算：

/* 两列父容器 */
.column-wrap {
  display: flex;
  align-items: stretch;
  gap: 20px; /* 按需调整列间距 */
}
/* 子列不需要额外设置高度，默认会和最高列对齐 */

内容的提问来源于stack exchange，提问作者hamid-davodi