Question

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

"使用您的配置值：然后，您可以通过使用 this.$config 或 context.$config 的页面、store、组件和插件中的上下文在任何地方访问这些值。”（强调，来自 {{3 }})

当我尝试像这样访问我商店中的 $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

不幸的是，这并没有那么简单——你不能在没有首先传入上下文实例的情况下从商店访问 $config。你可以通过一个操作或 nuxtServerInit 轻松地做到这一点。

如果您使用的是 SSR：

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

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

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)
  }
}

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

1 个答案: