Vue组件columnDefinitions无法导出至Pinia store的问题求助

你用defineExpose暴露的columnDefinitions是组件实例属性，只能在父组件通过组件实例访问，不属于.vue模块的导出成员，所以直接从@/components/IntranetTable.vue导入会报错。

下面是两种可行的解决方案：

方案一：拆分逻辑到独立.ts文件（推荐） #

把表格列的定义逻辑从组件中抽离，单独放在工具文件里，这样组件和Pinia store都能复用该逻辑，也符合代码职责分离的原则：

1. 创建@/utils/columnDefinitions.ts文件，迁移列定义逻辑：

// @/utils/columnDefinitions.ts
import { reduce } from 'lodash' // 根据你的实际依赖导入

// 迁移组件中的columns定义
export const columns = {
  // 你的columns配置内容
}

type ColumnType = keyof typeof columns

export const columnDefinitions: Record<ColumnType, ColumnDefinition> = reduce(
  columns,
  (obj, column, columnName) => {
    const columnDefinition: ColumnDefinition = {
      align: "left",
      contentAlign: "left",
      sortable: true,
      ...column,
      id: columnName,
      name: columnName,
      value: (item: any) => {
        if (item.gefStoff) {
          if ("renderHtml" in column && column.renderHtml) {
            const renderedValue = column.renderHtml(item);
            if (typeof renderedValue === 'string' || typeof renderedValue === 'number') {
              return renderedValue;
            }
            return undefined; 
          } else if ("field" in column && column.field) {
            const fieldValue = column.field(item)
            if (fieldValue === null) {
              return undefined
            }
            return fieldValue
          }
        }
        return undefined
      },
    }
    obj[columnName] = columnDefinition
    return obj
  },
  {} as any,
)

2. 在.vue组件中导入使用：

<script setup>
import { columns, columnDefinitions } from '@/utils/columnDefinitions.ts'

// 如果需要向父组件暴露，依然可以用defineExpose
defineExpose({ columnDefinitions })
</script>

3. 在Pinia store中导入：

// store.ts
import { columnDefinitions as columnDefs } from "@/utils/columnDefinitions.ts"

方案二：在.vue组件中声明模块级导出（不推荐） #

如果一定要在组件文件中保留该逻辑，不要用defineExpose，直接用export const声明模块导出：

<script setup>
// ... 你的imports和columns定义

type ColumnType = keyof typeof columns

// 用export const代替单独声明const，将变量作为模块导出成员
export const columnDefinitions: Record<ColumnType, ColumnDefinition> = reduce(
  // 你的逻辑代码不变
)

// 若需要向组件实例暴露，可保留defineExpose
defineExpose({ columnDefinitions })
</script>

之后你就能在store.ts中正常导入columnDefinitions了。

内容的提问来源于stack exchange，提问作者Mr. A