如何在 root 的自定义元素中使用 vue 路由器和 vuex？

Question

我有嵌套的项目 custom elements。现在我需要 vuex 和 vue 路由器。我如何从根自定义元素使用此包，然后在所有子自定义元素中使用？

目前我试过只在每个组件中使用 vuex，如下所示：

<script>
import store from './store';

export default {
  setup() {
    const state = store.state;

    return { state };
  },
};
</script>

这里是 demo 带有嵌套自定义元素的项目

这是我的 main.js 文件代码：

import { defineCustomElement } from "./defineCustomElementWithStyles";
import App from "./App.ce.vue";

customElements.define("app-root", defineCustomElement(App));

Answer 1

您可以将它们导入到您的 main.js 文件中，该文件是您初始化 vue 实例的文件。

import Vue from 'vue';
import store from './store';
import { Router } from './router/index.js';

new Vue({
 
  router: Router,
  store,
  render: h => h(App),

}).$mount('#app');

路线可能与您的路线不同，因此您可以根据自己的项目轻松编辑它们。

Answer 2

Vue 插件需要应用程序实例，该实例未为从 defineCustomElement() 创建的组件定义。作为解决方法，您可以在临时应用程序实例上安装插件，然后将生成的上下文复制到实际应用程序中，如以下实用程序所示（我们稍后将使用）：

// defineCustomElementWithStyles.js
import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'

export const defineCustomElement = (component, { plugins = [] } = {}) =>
  VueDefineCustomElement({
    render: () => h(component),
    setup() {
      const app = createApp()

      // install plugins
      plugins.forEach(app.use)

      const inst = getCurrentInstance()
      Object.assign(inst.appContext, app._context)
      Object.assign(inst.provides, app._context.provides)
    },
  })

使用上面的 defineCustomElement() 而不是 vue 中的那个：

// main.js
import { defineCustomElement } from './defineCustomElementWithStyles'
import App from './App.ce.vue'
import store from './store'
import router from './router'

customElements.define(
  'app-root',
  defineCustomElement(App, {
    plugins: [store, router],
  })
)

demo

如何在 root 的自定义元素中使用 vue 路由器和 vuex？

How to use vue router and vuex inside custom element from root?

javascript

vue.js

vue-router

vuex

vuejs3