Nuxt.js: Accessing the store from an external file

[freevital]

// ~/store/index.js
import Vuex from 'vuex';

export default () => new Vuex.Store({
    actions: {
        someAction() {
            //
        }
    }
});

// external js file
import store from '~/store';

export default class AuthService {
    static login() {
        store.dispatch('someAction');
    }
}

I get an error when app builds:

TypeError: __WEBPACK_IMPORTED_MODULE_2__store__.default.dispatch is not a function
    at AuthService.js:10
    at <anonymous>

How can I dispatch an action of vuex in an external js file (not vue component)?

_{This question is available on Nuxt.js community (#c1780)}

[clarkdo]

There is a tricky way but not recommend, you'd better do it inside component 😸

let store
if (process.browser) {
  window.onNuxtReady(({$store}) => {
    store = $store
  })
}

export default class AuthService {
    static login() {
        store.dispatch('someAction');
    }
}

[kamwing]

@freevital
Try this

// @/store/index.js

let store

const initStore = () =>  {
  return store || (store = new Vuex.Store({
    actions: {
      someAction() {
          //
      }
    }
  }))
}

export default initStore

// external js file

import store from '@/store';

export default class AuthService {
    static login() {
        store().dispatch('someAction');
    }
}

[Atinux]

You can also do this:

export default class AuthService {
  constructor(store) {
    this.store = store
  }
  login() {
    this.store.dispatch('someAction')
  }
}

This way, your AuthService can be used with any Vue.js project.

[SinisaG]

Be vary here if you use @kamwing suggestion. This can lead to memory leak issues.

As the same instance of the store will be shared between all users on server side. That can:

1) Increase your initial store through time significantly (and initial HTML page rendered, as state is embeded in the template)
2) Expose user sensitive data to people that are not suppose to see it

I would say, the best option is to use your file as plugin and have access to store there. Or pass in the reference to the store (as @Atinux wrote).

[VsevolodTrofimov]

@Atinux but how do you get relevant store when countructuing instance of this service, without getting components involved?

I.e. I need to propagate some events from web socket to store (including whether it is connected or not). Every page sometimes needs that data, so I'd rather have it as a plugin and read from store in components.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.