Vue3+Pinia+vue3-openlayers+turf.js调用Store/Props值时控制台报错

核心问题分析 #

你遇到的报错本质是异步数据加载与同步渲染逻辑的时序冲突：在Pinia的SellersList数据未就绪（或坐标格式不合法）时，地图渲染、turf.js计算就已执行，导致拿到非预期的空值/非数值坐标。以下是针对性的解决步骤：

1. 确保Pinia数据的响应式正确性 #

直接解构Pinia state会丢失响应式，必须用storeToRefs包装：

import { storeToRefs } from 'pinia'
import { useActiveEventStore } from '@/stores/activeEvent'

const activeEventStore = useActiveEventStore()
// 用storeToRefs保证SellersList的响应式
const { SellersList } = storeToRefs(activeEventStore)

2. 条件渲染拦截无效数据 #

在地图点位组件外层添加v-if，仅当数据有效时才渲染：

<!-- 仅当数组非空且坐标合法时渲染点位 -->
<ol-feature 
  v-if="SellersList.length > 0 && isValidSellerCoords(SellersList)"
  v-for="seller in processedSellerPoints"
  :key="seller.id"
>
  <!-- 你的点位样式、坐标绑定逻辑 -->
</ol-feature>

配套坐标校验函数，过滤非法数据：

// 校验每一项的坐标是否为合法数字
const isValidSellerCoords = (list) => {
  return list.every(item => {
    return typeof item.lat === 'number' && typeof item.lng === 'number' && !isNaN(item.lat) && !isNaN(item.lng)
  })
}

3. 延迟turf.js计算至数据就绪 #

用computed或watch实现数据驱动的计算，避免提前执行：

方案1：使用computed生成处理后的点位数据

import { computed } from 'vue'
import * as turf from '@turf/turf'

// 仅当数据有效时，才执行坐标转换与turf计算
const processedSellerPoints = computed(() => {
  if (!SellersList.value.length || !isValidSellerCoords(SellersList.value)) {
    return []
  }
  
  return SellersList.value.map(seller => {
    // 转墨卡托坐标后生成turf点对象
    const mercatorCoords = convertToMercator([seller.lng, seller.lat])
    return {
      ...seller,
      turfPoint: turf.point(mercatorCoords)
    }
  })
})

方案2：用watch监听数据变化触发计算

import { watch } from 'vue'
import * as turf from '@turf/turf'

// 深度监听SellersList的变化
watch(SellersList, (newList) => {
  if (!newList.length || !isValidSellerCoords(newList)) return
  
  // 数据就绪后执行turf计算
  newList.forEach(seller => {
    const mercatorCoords = convertToMercator([seller.lng, seller.lat])
    const turfPoint = turf.point(mercatorCoords)
    // 后续渲染逻辑
  })
}, { deep: true })

4. 修复Pinia数据的格式问题 #

turf.js报错“coordinates must contain numbers”大概率是后端返回的坐标是字符串类型，需在Pinia的action里统一转换：

// stores/activeEvent.js
export const useActiveEventStore = defineStore('activeEvent', {
  state: () => ({
    SellersList: []
  }),
  actions: {
    async fetchSellersList() {
      const res = await api.get('/sellers')
      // 强制将坐标转为数字类型
      this.SellersList = res.data.map(item => ({
        ...item,
        lat: Number(item.lat),
        lng: Number(item.lng)
      }))
    }
  }
})

5. 确保数据加载时机正确 #

在组件挂载时先触发数据请求，而非直接执行渲染逻辑：

import { onMounted } from 'vue'

onMounted(() => {
  // 先拉取数据，再靠响应式自动触发渲染
  activeEventStore.fetchSellersList()
})

内容的提问来源于stack exchange，提问作者Aaron Reese