Estoy usando vuex v4 con api de composición. El problema es que no pude acceder a los estados de la tienda en los componentes, pero puedo verlos en vue-devtools. Cuando quiero acceder al estado de la tienda, me dio undefined .

tienda/index.ts :

 import { InjectionKey } from "vue"; import { createStore, createLogger, Store, useStore as vuexUseStore, } from "vuex"; import { ConfigStateType } from "./config/state"; import config from "./config"; export enum ModuleTypes { CONFIG = "CONFIG", } export interface StateInterface { config: ConfigStateType; } export const key: InjectionKey<Store<StateInterface>> = Symbol(); export const store = createStore<StateInterface>({ modules: { [ModuleTypes.CONFIG]: config, }, strict: debug, }); export function useStore() { return vuexUseStore(key); }

vue js principal.ts :

 import { store, key } from "./store"; createApp(App).use(store, key).use(router).mount("#app");

En mi componente:

 import { useStore } from "@/store"; setup() { const store = useStore(); const recaptchaSiteKey = computed( () => store.state.config.googlerecaptcha_site_key ); return { recaptchaSiteKey } }

siempre recaptchaSiteKey devuelve indefinido, pero en vue-devtools los estados están llenos.

herramienta de desarrollo vuex: