Unable to Export and Utilize Vue Component Data to a pinia store

I recently refactored my code in a Vue project, moving the columnDefinitions structure from a .ts file to a .vue component. Previously, this structure was exported and used in a store.ts file to structure table columns via pinia.

However, after this relocation, I’m encountering issues trying to export and utilize columnDefinitions in my store.ts file. Here’s a simplified representation of what I had before and what I’ve done:

<script setup>
@imports
/* 
required code(columns,......)
*/

type ColumnType = keyof typeof columns

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,
)
defineExpose({columnDefinitions})

store.ts:

import {columnDefinitions as columnDefs} from "@/components/IntranetTable.vue"

Error:Module ‘”@/components/IntranetTable.vue”‘ has no exported member ‘columnDefinitions’

How can I properly export and use columnDefinitions from MyComponent.vue in my store.ts file? Any help or guidance on the best approach would be greatly appreciated! Thank you.

  • script setup doesn’t work like that, and you may have problems with non-default exports with .vue sfc in general. That you need columnDefinitions somewhere else means that columnDefinitions needs to be extracted to a separate .ts module. It’s potential design problem that components are used in a store. global stores are mainly used for business logic and not presentation due to the separation of concerns

    – 

  • That means, I should’t refactor the columnDefinitions from .ts file to .vue component?

    – 

  • Depends on what the refactoring was about. In this case you need to extract it from .vue to helper module and import it in all places where you use it, no other changes are necessary. Or probably this means that store code where you need it doesn’t belong to a store

    – 




Leave a Comment