Vue3中用Webpack拆分Pinia Store代码报错：state.getPhotos不是函数

错误原因 #

动态import()返回的是模块Promise对象，不是直接可用的Store实例或创建Store的函数。你大概率是把模块对象直接当成Store调用方法了，自然找不到getPhotos函数。

正确写法与调用方式 #

1. 基础动态导入流程 #

不管是在组件还是业务逻辑里，都得先等模块加载完成，取出导出的usePhotoApi函数，再调用它拿到Store实例：

// 组件内示例代码
async function fetchPhotos() {
  // 动态加载模块，解构出创建Store的函数
  const { usePhotoApi } = await import('@/stores/photoApi')
  // 调用函数获取Store实例
  const photoStore = usePhotoApi()
  // 正常调用Store方法
  const photos = await photoStore.getPhotos()
  // 后续处理数据逻辑
}

2. 配合路由懒加载的场景 #

如果是为了路由层面的代码分割，只需要在对应组件内部按上面的方式动态引入Store即可：

// 路由配置示例
const PhotoListPage = () => import('@/views/PhotoListPage.vue')

// PhotoListPage.vue内部代码
<script setup>
import { onMounted } from 'vue'

onMounted(async () => {
  const { usePhotoApi } = await import('@/stores/photoApi')
  const photoStore = usePhotoApi()
  await photoStore.getPhotos()
})
</script>

3. 模板中使用Store数据的注意点 #

如果需要在模板里绑定Store的数据，得把Store实例存进ref里，确保响应式：

<script setup>
import { ref, onMounted } from 'vue'

const photoStore = ref(null)

onMounted(async () => {
  const { usePhotoApi } = await import('@/stores/photoApi')
  photoStore.value = usePhotoApi()
  await photoStore.value.getPhotos()
})
</script>

<template>
  <div v-if="photoStore">
    <div v-for="item in photoStore.photos" :key="item.id">{{ item.title }}</div>
  </div>
</template>

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