Trouble Accessing Data from Boot File

[bdaviddee]

Hello! I need help seeing what I’m missing here. I have this boot file which runs fine and outputs the expected value to console when app reloads / initializes:

function requestUserName({ store }) {
  console.log(store.getters['auth/requestUserName']);
}

export default requestUserName;

However, when I call that function in a .js file or component like this:

import requestUserName from '../boot/testBootFile';

export default {
  created() {
    requestUserName();
  },
};

I get this error:

Error in created hook: "TypeError: Cannot read property 'store' of undefined"

I’ve tried several configurations based on https://quasar.dev/quasar-cli/cli-documentation/boot-files#Accessing-data-from-boot-files page but I still can not solve this. Any help would be appreciated!

[metalsadman]

@bdaviddee refer to the anatomy of the boot file first. https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file

your boot file should have an export default function, seen in the docs.
be sure you have vuex installed. btw you don’t need a boot file to access your vuex state in your component. you can simply just

export default {
  created() {
    console.log(this.$store.getters['auth/requestUserName'])
  },
};

[bdaviddee]

Thank you for replying @metalsadman … so this means that, vuex store is only present there when it’s called during boot and not if it is called outside of that context?

My example shows it being called from a component only because I was providing myself a quick way to call it separate from boot to compare the behavior, but what I’m actually trying to achieve is access to vuex store in an external js service file. After lots of google searching I was directed to turning my service file into a boot file, but going that route doesn’t make sense for me if I can’t access those values. In regular Vue I normally import the store manually in files but doing the same thing (with the same modular vuex setup) in Quasar causes errors when trying to hit the namespaced getters. For example in a testService.js file:

import store from '../store';

function testStoreAccess() {
  const requestUserName = store.getters['auth/requestUserName'];
  return requestUserName;
}

export default {
  testStoreAccess,
};

and in component:

import testService from '../services/testService';

export default {
  created() {
    const test = testService.testStoreAccess();
    console.log(test);
  },
};

I get the same result. Is there a quasar - specific way that you’d recommend for accessing vuex store in external js files? Thanks!

[metalsadman]

@bdaviddee you can expose your store instance at src/store/index.js
something like:

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

import example from './module-example'

Vue.use(Vuex)

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */
let store = null
export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      example
    }
  })
  store = Store
  return Store
}

export { store }

//some js file
import { store } from '.../store'
somefunction()..
  store....

is that a mixin you’re trying to make? i see a created there. like i said if it’s a vue file, then you can just do what i suggested on my last comment.

[bdaviddee]

That did the trick. Thank you so much. I apparently have some misunderstandings about exports.

Re: mixin…I’m not sure, honestly I haven’t really looked at mixins much. I’ll read more about them now to see if that makes more sense.

Thanks again!!

[metalsadman]

@bdaviddee great, welcome.

[sylnsr]

This was driving me nuts. Can we get this closer to the standard documentation please? My use case was trying to access the store in a mixin.

[cd]

@sylnsr : Same issue; spent a whole day on this…

Wasn’t clear at all how the store was supposed to be accessed from code.

[beets]

Just to play devil’s advocate, you can’t access the store like this in SSR mode, which Quasar aims to support without code changes, but I could see a doc improvement with these examples as long as it’s noted about SSR mode.

[pazarbasifatih]

The Internet is full of

import store from "../store";
const url = "https://..."
store.commit("setDownloadURL", url);

kind of solutions but they spit out an error message like
_store__ WEBPACK_IMPORTED_MODULE_1__ .default.commit is not a function

I couldn’t find an elegant solution.

[pazarbasifatih]

@metalsadman said in Trouble Accessing Data from Boot File:

store = Store

Exposing the store worked out for me as well. Thank you.

[vijay]

Worked great! Thank you