Vuex 상태에서 nuxt '$config'에 액세스하는 방법액세스 방법만 스토어 액션 방식을 사용합니까?

Vuex 상태에서 nuxt '$config'에 액세스하는 방법액세스 방법만 스토어 액션 방식을 사용합니까?

.env 파일을 사용하기 위해 dotenv 라이브러리를 사용해 왔지만 프로젝트 개인키가 쉽게 노출된다는 것을 알고 있기 때문에 runtimeConfig를 변경해야 합니다.

최근 프로젝트에서 nuxt "^2.14"를 사용했고 모드는 SPA입니다.이와 같이 nuxt.config.ts에는 "public Runtime Config"만 사용합니다.

.env

Test_BASE_URL:'https://test.org'

nuxt.config.ts

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

나는 vue 파일에서 그렇게 env를 사용할 수 있다.

sample.vue

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

그러나 스토어 상태에서는 $config를 사용할 수 없었습니다.내가 그걸 쓰려고 했는데 항상 '무방비'로 돌아온다.

인덱스.ts

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

저는 이 남자들의 솔루션을 참조하고 액션 방법을 통해 상태 값을 변경했습니다.SPA를 사용한 적이 있기 때문에 플러그인으로 'nuxtServerInit' 등의 메서드를 만들었습니다.

플러그인/clientInit.ts

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

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

인덱스.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}

위의 액션 메서드를 통해 상태 값을 변경하는 것은 성공했지만, "콘텍스트"가 스토어/스테이트 객체를 직접 사용할 수 없는 이유를 알 수 없습니다.$config를 스토어/스테이트에서 사용하는 방법을 아는 사람이 있습니까?아니면 위와 같은 액션 방법으로만 $config를 사용할 수 없는 것입니까?

그 이유는 Vuex에서는 실제로 작업만 앱 컨텍스트를 받기 때문입니다.상태, 돌연변이 및 게터는 의도적으로 액세스할 수 없습니다.

초기 상태는 컨텍스트가 없는 상태여야 합니다. 즉, 런타임 실행에 의존하지 않는 값을 사용해야 합니다.

돌연변이는 상태 비저장입니다. 매개 변수를 사용하여 상태를 업데이트합니다.그게 다예요.콘텍스트 풀 파라미터는 발신자로부터의 것입니다.

Getter는 반응형 상태 변환일 뿐이며 Vuex 모듈 상태를 방해하는 컨텍스트 속성에 의존해서는 안 됩니다.

---

네, 당신이 해야 할 일은 당신의 매장을 초기화하는 것입니다.nuxtServerInit액션(또는 SPA 앱용 플러그인):

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

언급URL : https://stackoverflow.com/questions/68218994/how-to-access-nuxt-config-in-vuex-state-only-access-method-is-through-store