Accessing Vuex Module in JS file-CodePudding

I am using Quasar framework Vue3 and importing a module in my Vuex Store. It works fine when I consume it in a Vue file but how can access it from a JS file? I can log the states in the settings module, but everything is blank. It seems like it wasnt initialized yet, but how can I get the initialized and filled up store? Also, when Vuex store is updated, and I try to fetch the updated data from the JS file, it just shows blank/null.

import { createStore } from 'vuex'
import { settings } from './settings'

export default function () {
  const Store = createStore({
    modules: {
      settings
    },
    state: {
      isProdBuild: process.env.NODE_ENV === 'production'
    }
  })
  return Store
}

import useStore from '../store'

const store = useStore()
export function sample () {
  console.log(store.state.isProdBuild) // this works
  console.log(store.state.settings.sampleParam) // doesnt work, seems like the value isnt initialized
}

Help! Thanks!

CodePudding user response：

Found a workaround for this issue.

In my JS file, I just added a setter function to set the store.

let store = null
export setStore(val) {
   store = val
}

export function sample () {
  console.log(store.state.isProdBuild)
  console.log(store.state.settings.sampleParam)
}

Then in my Vue file:

import { onMounted } from 'vue'
import { useStore } from 'vuex'
import { setStore, sample } from 'sample-file.js'

const $store = useStore()

onMounted(() => {
  setStore($store)
})

Then calling whatever method from sample-file.js that accesses the Vuex store works now and the state is always updated.

CodePudding user response：

Actually it should be way easier. Every state from the different modules would be merged into just a single state of the store, and you should be able to use it just like that:

import { createStore } from 'vuex'
import { settings } from './settings'

export default function () {
  const Store = createStore({
    modules: {
      settings
    },
    state: {
      isProdBuild: process.env.NODE_ENV === 'production'
    }
  })
  return Store
}

import useStore from '../store'

export function sample () {
  console.log(store.state.isProdBuild)
  console.log(store.state.sampleParam) // if there's sampleParam in the settings module this should work
}