CODEWITHSUNDEEP
javascriptvue.jsvuex
Elena Maximova
Elena Maximova

Reputation: 946

accessing vuex store in js file

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?

Upvotes: 55

Views: 76599

Answers (7)

ryandougc
ryandougc

Reputation: 117

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.

Upvotes: 0

Samad
Samad

Reputation: 1832

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

Upvotes: 2

bessa3301
bessa3301

Reputation: 131

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

Upvotes: 10

Grandizer
Grandizer

Reputation: 3025

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

Upvotes: 10

Danial Nazari
Danial Nazari

Reputation: 489

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

Upvotes: 3

EJL
EJL

Reputation: 205

put brackets on your import and it should work

import { store } from '../store'

Upvotes: 3

Paweł Gościcki
Paweł Gościcki

Reputation: 9594

The following worked for me:

import store from '../store'

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

Upvotes: 51

Related Questions