在 Vuex 状态中访问 Nuxt `$config`

Question

根据 Nuxt 文档，我应该能够访问$config从我的 vuex 商店中访问：

“使用您的配置值：然后您可以通过使用或来使用页面、商店、组件和插件中的上下文，在任何地方访问这些值。” （强调，来自this.$configcontext.$confighttps://nuxtjs.org/docs/2.x/directory-struct/nuxt-config#runtimeconfig）

当我尝试$config像这样访问我的商店时：

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

我在控制台中收到一条错误消息：“无法读取未定义的属性'$config'”如果我尝试使用context.$config则会收到错误：“上下文未定义”

我知道$config否则“有效”，因为我可以在模板中使用 访问它$config.appVersion，但如何在我的商店中正确访问它？

Answer 1

不幸的是，\xe2\x80\x99s 并不那么简单\xe2\x80\x94，你可以\xe2\x80\x99t 从存储中访问 $config，而无需先传递上下文实例。你可以通过一个操作轻松完成此操作，或者nuxtServerInit.

\n

如果您\xe2\x80\x99正在使用SSR：

\n

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

\n

否则，您可以通过分派从应用程序内其他位置调用的操作来传递上下文。例如。从带有 asyncData 的页面：

\n

page-example.vue\n\nasyncData(context) {\n  context.store.dispatch('loadInActionExample', { data: 'test', context: context })\n}\n

\n

Your store (index.js or action module)\n\nexport const actions = {\n  loadInActionExample(context, payload) {\n    // payload.context.$config is accessible...\n \n    // execute your action and set data\n    context.commit('setData', payload.data)\n  }\n}\n\n

\n