Property 'getters' does not exist on type 'StoreCallback'

Question

Im trying to create an store space in quasar but when I try to access to the getter, dispatch, etc. from de store it says that they don't exist.

My router/store/index.ts

export const storeKey: InjectionKey<VuexStore<StateInterface>> =
  Symbol('vuex-key');

export default store(function (/* { ssrContext } */) {
  const Store = createStore<StateInterface>({
    modules: {
      // example
      sidebar_state,
      authentication,
      crud,
      view,
    },

    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    strict: !!process.env.DEBUGGING,
  });

  return Store;
});

and the import (is in a ts file not in a vue file)

import store from './store';


let user = await store.dispatch('authentication/getUser');

and the error is:

ERROR in src/router/index.ts:80:15

TS2339: Property 'getters' does not exist on type 'StoreCallback'.
    78 |     alert(store);
    79 |     let user: any;
  > 80 |     if (store.getters['authentication/auth']) {
       |               ^^^^^^^
    81 |       user = await store.dispatch('authentication/getUser');
    82 |     }
    83 |     if (

Answer 1

As you can see, the default export of the file is a function that creates a new store, therefore import store from './store' is a function, not the real store object. I've come to a solution -- export the store object separately.

let Store;
export default store(function (/* { ssrContext } */) {
  Store = createStore<StateInterface>({
    modules: {
      // example
      sidebar_state,
      authentication,
      crud,
      view,
    },

    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    strict: !!process.env.DEBUGGING,
  });

  return Store;
});

export function getStore() {
  return Store;
}

Now store is available this way:

import { getStore } from './store';

let user = await getStore().dispatch('authentication/getUser');

** There is another way (here), but accessing SSR Context is not possible in creating the store.

const Store = new Vuex.Store({...})

export { Store }
export default function (/* ssrContext */) {
  return Store
}

import { Store } from './store';
let user = await Store.dispatch('authentication/getUser');