accessing vuex store in js file

This Worked For Me In 2021

I tried a bunch of different things and it seems, at least in Vue 3, that this works. Here is an example store:

export default {
  user: {
    bearerToken: 'initial',
  },
};

Here is my Getters file:

export default {
  token: (state) => () => state.user.bearerToken,
};

Inside your .js file add the page to your store\index.js file.

import store from '../store';

In order to access the getters just remember it is a function (which may seem different when you use mapGetters.)

console.log('Checking the getters:', store.getters.token());

The state is more direct:

console.log('Checking the state:', store.state.user.bearerToken);

If you are using namespaced modules, you might encounter the same difficulties I had while trying to retrieve items from the store;

what might work out for you is to specify the namespace while calling the getters (example bellow)

import store from '../your-path-to-your-store-file/store.js'

console.log(store.getters.['module/module_getter']);

// for instance

console.log(store.getters.['auth/data']);

The following worked for me:

import store from '../store'

store.getters.config
// => 'config'