Trouble Accessing Data from Boot File

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.