Vue3中defineCustomElement自定义元素使用Pinia报错解决方案

结论 #

可以在通过defineCustomElement注册的自定义元素组件中使用Pinia store。你遇到的TypeError: Cannot read properties of undefined (reading '_s')报错，核心原因是自定义元素没有接入Pinia的注入上下文：

• 你的代码中没有初始化Pinia实例
• defineCustomElement生成的自定义元素默认运行在独立的组件上下文中，不会自动继承外部的应用插件配置，直接调用store组合式函数时找不到Pinia实例，就会抛出读取内部属性_s的错误。

修复方案 #

1. 修改入口文件配置 #

调整main.ts的逻辑，提前创建Pinia实例，在定义自定义元素时通过configureApp配置项给每个自定义元素注入Pinia，需要共享状态的多个自定义元素可以复用同一个Pinia实例：

import { createApp, defineCustomElement } from 'vue'
import { createPinia } from 'pinia'
import UsuariosInternet from './pages/general/UsuariosInternet.ce.vue'
import homeTest from './components/homeTest.ce.vue'

// 初始化全局Pinia实例
const pinia = createPinia()

// 注册第一个自定义元素
const UsuariosInternetElement = defineCustomElement(UsuariosInternet, {
  configureApp(app) {
    // 给自定义元素的独立应用上下文注入Pinia
    app.use(pinia)
  }
})
customElements.define("usuarios-internet", UsuariosInternetElement);

// 注册第二个自定义元素
const HomeTestElement = defineCustomElement(homeTest, {
  configureApp(app) {
    // 注入同一个Pinia实例，保证两个自定义元素共享store状态
    app.use(pinia)
  }
})
customElements.define('home-test', HomeTestElement);

2. 原有业务代码无需调整 #

你写的Pinia store定义、组件内调用store的逻辑本身没有语法问题，完成上面的配置后，组件内的state、getter、action都可以正常调用。

注意事项 #

• 每个通过defineCustomElement生成的自定义元素都有独立的应用上下文，必须单独在configureApp回调中注册需要用到的插件，不会自动继承外部配置。
• 如果自定义元素需要在非Vue技术栈的页面中使用，不需要额外创建Vue根实例执行挂载操作，完成上面的自定义元素注册即可正常使用。

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