Vue构建Web Component时触发Vuex的TypeError: Cannot read property 'getters' of undefined错误

这个错误的核心原因很明确：你的Web Component对应的Vue实例中没有正确注入Vuex Store，导致this.$store为undefined，当你尝试访问this.$store.getters时就会抛出这个错误。

在普通Vue项目中，我们通常会在main.js里通过new Vue({ store })把Store注入到根实例，所有子组件都会自动继承这个Store。但当你用--target wc构建Web Component时，组件会被打包成独立的自定义元素，它的Vue实例不会自动关联全局的Store，必须手动处理。

解决方案步骤 #

1. 在Web Component内部显式引入并绑定Store

修改你的主Vue组件，直接引入Store实例，并在组件选项中声明它：

<template>
  <!-- 模板部分不变 -->
</template>
<script>
import InsiderTrade from './components/InsiderTrade';
import { io } from 'socket.io-client';
import store from './store'; // 引入你的Vuex Store

export default {
  name: 'App',
  store, // 关键：给当前组件绑定Store实例
  components: {
    InsiderTrade,
  },
  // ... 其他逻辑
};
</script>

这样组件的Vue实例就会拥有自己的Store实例，this.$store就不再是undefined了。

2. 改用Computed属性获取Store数据（可选但推荐）

你当前在data中直接赋值insiderTrades: this.$store.getters.getInsiderTrades，这只会在组件初始化时获取一次值，后续Store中的数据更新不会同步到组件。改用Computed属性可以实现响应式更新：

<script>
// ... 其他导入和配置
export default {
  // ... 其他选项
  data() {
    return {
      connectedState: '',
      connectedStateColor: '',
      // 移除这里的insiderTrades
    };
  },
  computed: {
    insiderTrades() {
      return this.$store.getters.getInsiderTrades; // 响应式获取Store数据
    }
  },
  // ... 其他逻辑
};
</script>

3. 验证打包配置

确保你的Vue CLI打包配置中没有把Vuex排除在打包范围外。如果你的vue.config.js中有externals配置，要确保vuex不在其中，否则Web Component运行时会找不到Vuex依赖：

// vue.config.js
module.exports = {
  // 确保没有类似这样的配置排除Vuex
  // externals: {
  //   vuex: 'Vuex'
  // }
}

为什么组件还能连接Socket.io？ #

因为Socket.io的逻辑是在mounted钩子中直接初始化的，没有依赖this.$store，所以即使Store报错，这部分代码依然能正常执行，组件可以和服务器建立连接。

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