Nuxt中Vuex State内访问$config出现未定义报错的解决方法

你写的代码会报错，核心原因是执行时机不对 + 没有对应上下文：

• 你导出的state是个纯工厂函数，这个函数在Vuex Store刚初始化的时候就会被执行，此时Nuxt还没把上下文、$config这些东西准备好注入进去，函数内部既没有绑定this，也拿不到context参数，所以两种写法必然报错
• 官方文档提到的“在Store里访问$config”，指的是Store的actions、mutations这些运行时会被Nuxt注入上下文的方法，不是要求开发者直接在最早期的state初始值函数里硬编码访问$config。

方案1：插件注入$config到Store实例（兼容所有场景） #

这是最稳定、没有版本兼容问题的实现方式，步骤非常简单：

1. 新建plugins/attach-config-to-store.js插件文件，插件执行时Nuxt已经完成$config的初始化：

export default ({ $config, store }) => {
  // 把$config直接挂在Store实例上，后续所有Store的方法都能访问到
  store.$config = $config
}

2. 在nuxt.config.js里注册这个插件：

export default {
  plugins: [
    '~/plugins/attach-config-to-store.js'
  ]
}

3. 之后在Store的actions、mutations里就可以直接访问$config了：

// store/index.js
export const actions = {
  // 示例：在服务端初始化时读取配置
  nuxtServerInit({ commit }) {
    // 这里的this就是Store实例，能拿到我们挂载的$config
    const appInfo = {
      appVersion: this.$config.appVersion,
      copyright: new Date().getFullYear()
    }
    commit('SET_APP_INFO', appInfo)
  },
  // 示例：普通业务action里读配置
  getAppVersion() {
    return this.$config.appVersion
  }
}

方案2：直接利用Nuxt对Actions的上下文注入能力（无需额外插件） #

Nuxt2在执行Store的actions时，会自动把完整的Nuxt上下文作为第三个参数传入action方法，直接解构就能拿到$config：

// store/index.js
export const actions = {
  // 第三个参数就是完整的Nuxt上下文，包含$config、路由、请求实例等所有能力
  fetchAppMeta({}, payload, { $config }) {
    return {
      appVersion: $config.appVersion,
      apiBaseUrl: $config.apiBaseUrl
    }
  }
}

注意：这种方式仅在actions内生效，初始state、getters、普通定义的mutations是拿不到这个上下文参数的

方案3：给State写入带$config值的初始数据 #

如果需要State初始化完成就带上$config的配置值，不需要等异步action执行，可以在之前的挂载插件里直接提交mutation写入初始值：

1. 先在Store里定义好初始结构和对应的mutation：

// store/index.js
export const state = () => ({
  app: {
    name: 'MyApp',
    appVersion: '',
    copyright: ''
  }
})

export const mutations = {
  SET_APP_INITIAL_INFO(state, appInfo) {
    state.app = { ...state.app, ...appInfo }
  }
}

2. 在插件中拿到$config后直接提交写入：

// plugins/attach-config-to-store.js
export default ({ $config, store }) => {
  store.$config = $config
  // 直接提交mutation写入初始state
  store.commit('SET_APP_INITIAL_INFO', {
    appVersion: $config.appVersion,
    copyright: new Date().getFullYear()
  })
}

• 不要在state的工厂函数内部尝试访问this.$config或者裸写context.$config，这个执行阶段没有任何上下文注入，100%会报错
• 不要直接import项目根目录的nuxt.config.js来读配置，这种方式只能拿到构建时的静态值，没法匹配runtimeConfig支持运行时环境变量覆盖的特性，会导致配置取值和实际运行的$config不一致
• 不要把组件里直接写this.$config的逻辑照搬到Store的初始state里，两者的执行时机、上下文环境完全不一样

内容的提问来源于stack exchange，提问作者solidau