programing

Vuex 상태 내 Nuxt '$config' 액세스

goodcopy 2022. 7. 24. 23:07
반응형

Vuex 상태 내 Nuxt '$config' 액세스

Nuxt의 문서에 따르면, 제가 이 컴퓨터에 접속할 수 있어야 합니다.$configvuex 스토어 내에서:

"설정 값 사용:다음으로 페이지, 스토어, 컴포넌트 및 플러그인의 컨텍스트를 사용하여 어디서든 이러한 값에 액세스할 수 있습니다.this.$config또는context.$config」(https://nuxtjs.org/docs/2.x/directory-structure/nuxt-config#runtimeconfig)에서 추가.

접속하려고 하면$config내 가게에서 이렇게.

export const state = () => (
    {
        // App vital details
        app: {
            name: 'MyApp',
            appVersion: this.$config.appVersion,
            copyright: helpers.getCurrentYear()
        },
    }
)

를 사용하면 콘솔에 "Cannot read property '$config' of undefined"라는 오류 메시지가 나타납니다.context.$config"콘텍스트가 정의되지 않았습니다"라는 오류가 표시된다.

알고있어요$config템플릿에서 액세스 할 수 있기 때문에, 그 이외의 경우는 「동작」하고 있습니다.$config.appVersion그런데 어떻게 하면 제 가게 안에서 제대로 접속할 수 있을까요?

유감스럽게도 그렇게 간단하지 않습니다. 먼저 컨텍스트 인스턴스를 전달하지 않고는 스토어에서 $config에 액세스할 수 없습니다.이는 액션 또는 nuxtServerInit을 통해 충분히 쉽게 수행할 수 있습니다.

SSR를 사용하는 경우:

actions: {
  nuxtServerInit (vuexContext, { $config }) {
    // your code...
  }
}

그렇지 않으면 앱 내의 다른 곳에서 호출된 작업을 디스패치하여 컨텍스트를 전달할 수 있습니다.예를 들어, 비동기 데이터가 있는 페이지에서:

page-example.vue

asyncData(context) {
  context.store.dispatch('loadInActionExample', { data: 'test', context: context })
}
Your store (index.js or action module)

export const actions = {
  loadInActionExample(context, payload) {
    // payload.context.$config is accessible...
 
    // execute your action and set data
    context.commit('setData', payload.data)
  }
}

언급URL : https://stackoverflow.com/questions/66960906/access-nuxt-config-within-vuex-state

반응형