accessing vuex store in js file

Question

Just like in main.js, I'm trying to access my store from a helper function file:

import store from '../store'

let auth = store.getters.config.urls.auth

But it logs an error:

Uncaught TypeError: Cannot read property 'getters' of undefined.

I have tried

this.$store.getters.config.urls.auth

Same result.

store:

//Vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        config: 'config',

    },
    getters: {
        config: state => state.config
    },
});

export default store

How do I make my store available outside of components?

Chairman

I have seen some related issues due to old syntax with new version. I think answer given is checked in latest version. – Dragoman

how about writing a pure function that takes the store getter as a function parameter? then pass the store to the function when you are using it in Vue component – Fault

Answer 1

The following worked for me:

import store from '../store'

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

Finder

store is undefined – Chairman

It worked for me. Just tried it on my repo. And yes, you have to use getters if you access store outside of Vue. – Churchless

Yes, just looking at it, it should work, but for some very weird reason it is not working. – Chairman

I would double check if your path to store.js is correct in your project. – Churchless

This can lead to unexpected behaviour though. For example for me, when a user first logs in, this just yields undefined in the .js file, but Vuex shows it is clearly defined. – Radiotherapy

how to watch changes like using watchers? – Scyros

Answer 2

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']);

Loram

javascript console.log(store.getters) // returns all getters from vuex, may help while debugging. – Loram

This worked for me: store.getters['auth/data']. No "period" after getters – Incurvate

Answer 3

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);

Alcantara

Does this still work in 2022? – Deannadeanne

@BeastJulian it should, that was a year ago and Vue 3 is till current. Try it. – Alcantara

Answer 4

put brackets on your import and it should work

import { store } from '../store'

Palpebrate

Why put brackets? It has a default export. – Kessel

Answer 5

using this approach has worked for me:

// app.js
import store from "./store/index"

const app = new Vue({
    el: '#app',
    store, //vuex
});
window.App = app;


// inside your helper method
window.App.$store.commit("commitName" , value);

Apraxia

Answer 6

if you are using nuxt you can use this approach

window.$nuxt.$store.getters.myVar

if you have multiple modules

window.$nuxt.$store.getters['myModule/myVar']

Aldas

Answer 7

If anyone like me is trying to do this in Pinia, and following the docs doesn't work for you, here's what worked for me. This doesn't make sense to me but it works so I'm going with it, if anyone knows why this works please let me know.

Here is the Pinia store:

//Pinia
import { defineStore } from 'pinia'

export const store = defineStore('test', {
    state: () => ({
        config: 'config'
    })
})

Here is the logic that accesses the store

// function.js
import { store } from '../store'

store().config

Typically, you would import the store and then initiate it as a function, as per the Pinia Docs.

import { store } from '../store'

const testStore = store()

However, this doesn't work and will say you forgot to install Pinia.

Stakhanovism