如何在 vue 3.2 中将 vuex 与 defineCustomElement 一起使用答案

【问题标题】：How to use vuex with defineCustomElement in vue 3.2如何在 vue 3.2 中将 vuex 与 defineCustomElement 一起使用
【发布时间】：2021-11-26 10:41:10
【问题描述】：

在 Vue 3.2 版中，我们可以使用新的未来 defineCustomElement 定义自定义元素

如何将（连接）存储（vuex）与 defineCustomElement 一起使用？

【问题讨论】：

标签： javascript vue.js vuex vuejs3

【解决方案1】：

我就是这样解决的：

// App.ce.vue
<template>
  <pre>{{ state }}</pre>
</template>

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

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

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

【讨论】：

如何将此商店连接到您的自定义元素？
如何创建使用 vuex 执行任何操作的方法。示例 vuex 操作或提交？如何调度动作？如果你有演示项目，你可以分享你的例子吗？
codesandbox.io/s/polished-grass-slq28
在我的情况下，这个例子也可以工作，但不能工作调度存储操作。如何在自定义元素中正确调度 vuex 操作？ @tvanbeek
开始工作有点挑剔，我同意。但是将您的组件重命名为 *.ce.vue 并确保您拥有正确版本的 @vitejs/plugin-vue@^1.4.0 或 vue-loader@^16.5.0 并且它应该可以工作。请仔细阅读文档：v3.vuejs.org/guide/web-components.html#sfc-as-custom-element.