Vuex 4搭配Composition API时组件内访问store state返回undefined

问题原因 #

• 核心原因是模块注册的key和实际访问的key大小写不匹配：你代码中注册模块时使用[ModuleTypes.CONFIG]作为key，该枚举对应值为全大写字符串CONFIG，因此根state下挂载的配置模块属性名为大写的CONFIG，而组件内访问时使用的是小写store.state.config，属性名不对应导致返回undefined。同时你定义的StateInterface内声明的属性是小写config，也和实际的store结构不匹配，会额外带来TS类型错误。
• 次要排查点：如果确认属性名一致仍有问题，检查config模块的googlerecaptcha_site_key是否提前在state中声明，Vuex要求state属性必须预先定义才能被正常响应式访问，动态追加的属性不会触发响应式更新，也可能出现devtools可见但组件读取为undefined的情况。

解决方案 #

方案1：修改组件内的访问路径，匹配注册的大写模块名 #

同步修改类型定义和访问路径：

// 先修改StateInterface匹配实际结构
export interface StateInterface {
  CONFIG: ConfigStateType;
}

// 组件内访问大写的CONFIG
const recaptchaSiteKey = computed(
  () => store.state.CONFIG.googlerecaptcha_site_key
);

方案2：修改模块注册逻辑，使用小写key挂载模块 #

调整枚举值为小写，和类型定义、访问路径匹配：

export enum ModuleTypes {
  CONFIG = "config", // 改为全小写和访问路径匹配
}

如果不需要枚举维护模块名，也可以直接在注册模块时写死小写key：

export const store = createStore<StateInterface>({
  modules: {
    config: config,
  },
  strict: debug,
});

额外注意项 #

如果googlerecaptcha_site_key是接口异步返回后赋值到state的，不要直接修改state属性，必须通过mutation提交更新，保证属性的响应式：

// 错误写法，直接赋值非预声明属性不会触发响应式
store.state.CONFIG.googlerecaptcha_site_key = 'xxx'

// 正确写法，通过mutation更新
mutations: {
  setRecaptchaKey(state, payload) {
    state.googlerecaptcha_site_key = payload
  }
}
// 调用
store.commit('CONFIG/setRecaptchaKey', 'xxx')

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