如何为通过defineCustomElement创建的Vue自定义元素注册Vuex插件？

Vue自定义元素基于原生Custom Elements规范，和常规Vue组件的插件注入逻辑不一样，下面是两种可行的实现方式：

方法一：定义自定义元素时传入Vuex插件 #

先创建好Vuex Store实例，再在defineCustomElement的配置参数里通过plugins选项传入：

import { defineCustomElement } from 'vue';
import { createStore } from 'vuex';
import Panel from './Panel.vue';

// 先创建Vuex Store实例
const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// 定义自定义元素时传入plugins配置
const CustomElement = defineCustomElement(Panel, {
  plugins: [store]
});

// 注册自定义元素
window.customElements.define('custom-commentpanel', CustomElement);

方法二：组件内部直接使用Store实例 #

如果项目里已经有全局的Store实例，直接在Panel.vue组件内引入并使用即可：

<!-- Panel.vue -->
<script setup>
import { useStore } from 'vuex';
// 或者直接引入全局导出的store实例
// import store from '../store';

const store = useStore();

// 示例：调用store的mutation
const addCount = () => {
  store.commit('increment');
};
</script>

这种方式要保证自定义元素初始化前，Store实例已经可以被组件访问到。

注意点 #

• 必须使用Vue 3+搭配Vuex 4+的版本，版本不匹配会导致兼容问题
• 常规Vue项目里的app.use(store)全局注册方式对自定义元素无效，必须通过上述两种方式注入Store

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