How to access nuxt `$config` in Vuex state? Only access method is through store actions methods?

Question

I have used to dotenv library to use .env file, but I have to change runtimeConfig because I realized it was easy to expose my project secret key.

In my latest project, I have used nuxt "^2.14" and mode is SPA. So I only use "publicRuntimeConfig" in nuxt.config.ts like that.

.env

Test_BASE_URL:'https://test.org'

nuxt.config.ts

export default {
   publicRuntimeConfig:{baseURL: proccess.env.Test_BASE_URL||''}
}

I can use env like that in vue file.

sample.vue

<script>
export default {
 mounted(){
  console.log(this.$config.baseURL)
 }
}
</script>

But I couldn't use "$config" in store's state. I tried to write that but it always return "undefied"

index.ts

export const state = (context) => ({
  url:context.$config
})

I have referred the this guys solutions and changed state's value through the actions method. I have used SPA, so I made method like 'nuxtServerInit'as plugins.

plugins/clientInit.ts

import {Context} from "@nuxt/types";

export default function (context:Context) {
 context.store.dispatch('initEnvURL',context.$config)
}

index.ts

interface State {
 testURL: string
}
const state = () => ({
 testURL:''
})
const mutations = {
 setTestURl(state:State,config:any) {
  state.testURL = config.baseURL
}
const actions = {
 initEnvURL({commit},$config) {
 commit('setTestURl',$config)
}
}
export default {state,mutations,actions}

I success to change state value through actions methods above, but I don't know why "context" can't use store/state objects directly. Does anyone know how to use $config in store/state? or is it impossible only way to use $config through actions method like above?

Answer 1

That's because in Vuex, only actions actually receive the app context. State, Mutations and Getters can't access it by design.

Your initial state should be contextless, i.e. with values that doesn't depend on the runtime execution.

Mutations are stateless, they just take a parameter and update the state. That's all. Contextful parameters should be coming from the caller.

Getters are just reactive state transformations, and should not rely on context properties, that would be messing with the Vuex module state.

---

So yes, what you have to do it initialise your store within the nuxtServerInit actions (or from a plugin for SPA apps):

nuxtServerInit({ store, config } ) {
   store.commit('UPDATE_BASE_URL', config.baseUrl)
}