access store outside of component vuejs

Question

I have a file for configuring my OpenID Connect authentication

export const authMgr = new Oidc.UserManager({
  userStore: new Oidc.WebStorageStateStore(),
  authority: **appsetting.oidc**
})

I want to access my state in order to get the value of appsetting.

I did this:

import store from './store'

const appsetting = () => store.getters.appsetting

but my appsetting is always returning undefined

what I my missing?

Store:

app.js

const state = {
  appsetting: appsetting,
}

export {
  state 
}

getters.js

const appsetting = state => state.appsetting

export {
  appsetting
}

index.js

export default new Vuex.Store({
  actions,
  getters,
  modules: {
    app
  },
  strict: debug,
  plugins: [createLogger]
})

when I print the value of store.getters, it returns this:

{
  return __WEBPACK_IMPORTED_MODULE_2__store__["a" /* default */].getters;
}

No the actual store objects

Does this answer your question? [accessing vuex store in js file](https://stackoverflow.com/questions/47819289/accessing-vuex-store-in-js-file) — A-Tech, May 23 '22 at 12:59
You probably have an index.js/main.js file in you /store folder. You want to import that: import store from './store/index' then it should work. — A-Tech, May 23 '22 at 13:01

Shay Altman · Accepted Answer · 2018-01-09T09:01:47.020

81

Try to import 'store' with curly brackets

import {store} from '../store/index'

store.getters.appSettings

Another option is to access from the vue property

import Vue from 'vue'

Vue.store.getters.appSettings

edited Jan 09 '18 at 09:01

answered Nov 30 '17 at 14:24

Shay Altman

9

An example of how to access a nested module's getter (and also pass a parameter) is `const hasTextAutomationEnabled = store.getters['account/hasFeature']('text-automation');` (You can normally use the dot notation, but since the module is referenced with a forward-slash "/", it's easier to get the property via the array syntax with square brackets. If there is no parameter for your getter, don't put the "(param)" at the end.) – parker_codes Oct 30 '19 at 21:18
1

Anyone can explain why we need to use curly brackets? – Ammad Khalid Jan 14 '21 at 19:29
1

The curly brackets around store are used because it's not a default export. If it's a default export then you don't use the curly brackets. In this example OP used export { store } instead of export default store – Jack Barry Mar 16 '21 at 22:43
1

The first one works great, but the `Vue.store.getters.appSettings` one doesn't seem to work for me, weird... – Chen Ni Apr 23 '21 at 02:59
1

both doesnt work on my case.. I have a modules in my store,,, but accessing them gives error,,, I tried both options above but doesnt work, im using typescript – Jenuel Ganawed Aug 27 '21 at 05:01
Isn't this going to make it not reactive? How do you use `store.getters` outside of `export default {}` and at the same time make sure that it is reactive? – HNG Nov 13 '22 at 16:56

score 1 · Answer 2 · answered Feb 09 '23 at 17:30

1

As for 2023 accesing store with

import {store} from '../store/index'
store.getters.appSettings

wasnt working for me but after removing curly brackets like so:

import store from '../store/index'
store.getters.appSettings

It started working as intended

answered Feb 09 '23 at 17:30

Ave

I think this works only because your store is the default export. Otherwise, the curly brackets are needed as stated by Jack Barry in the accepted answer. – castin Jun 21 '23 at 10:31

2 Answers2