Nuxt.js中如何从组件获取异步请求变量到其他JS文件？

当然可以用Vuex来解决这个问题，而且这是Nuxt项目里跨组件/工具类共享异步数据的常规方案之一。下面我会给你详细讲清楚实现步骤，另外也会提供一种更轻量化的替代方案供你参考。

方案一：使用Vuex实现全局数据共享 #

如果这个变量需要在多个页面、组件或者工具类中复用，Vuex是最适合的选择，步骤如下：

1. 在Vuex Store中定义状态与修改方法 #

首先在你的store目录下（如果没有模块可以直接在store/index.js）添加对应的状态、mutations：

// store/index.js
export const state = () => ({
  // 初始化变量为null
  myVariable: null
})

export const mutations = {
  // 定义修改状态的方法
  SET_MY_VARIABLE(state, value) {
    state.myVariable = value
  }
}

// 如果需要把请求逻辑也放到Vuex里，可以加个action
export const actions = {
  async fetchAndSetMyVariable({ commit }) {
    const response = await this.$axios.get('/api/your-target-endpoint')
    commit('SET_MY_VARIABLE', response.data)
  }
}

2. 在页面组件中更新Vuex状态 #

当页面异步请求拿到someVariable后，把它更新到Vuex中：

<template>
  <!-- 你的页面内容 -->
</template>

<script>
export default {
  async mounted() {
    // 页面内发起异步请求获取数据
    const response = await this.$axios.get('/api/your-data')
    const someVariable = response.data
    
    // 方式1：直接调用mutation更新状态
    this.$store.commit('SET_MY_VARIABLE', someVariable)
    
    // 方式2：如果用了上面的action，直接dispatch
    // await this.$store.dispatch('fetchAndSetMyVariable')
  }
}
</script>

3. 在axios工具类中动态获取Vuex状态 #

注意：不要在初始化axios实例时直接取状态（因为异步请求完成前状态还是null），建议用请求拦截器动态设置header，确保每次请求都能拿到最新的状态值：

// axiosUtility/index.js
import axios from 'axios'
import store from '@/store'

const myAxios = axios.create({
  // 这里可以放一些固定的header配置
})

// 添加请求拦截器，动态设置自定义header
myAxios.interceptors.request.use(config => {
  // 从Vuex中获取最新的变量值
  config.headers['X-My-Variable'] = store.state.myVariable
  return config
})

export default myAxios

方案二：直接传递变量（适合单页面场景） #

如果这个变量只在单个页面使用，不需要全局共享，那可以把axios工具类改成一个工厂函数，直接接收变量参数：

// axiosUtility/index.js
import axios from 'axios'

// 定义一个创建axios实例的函数，接收变量作为参数
export const createCustomAxios = (myVariable) => {
  return axios.create({
    headers: {
      'X-My-Variable': myVariable
    }
  })
}

然后在页面组件中使用：

<script>
import { createCustomAxios } from '@/axiosUtility'

export default {
  async mounted() {
    const response = await this.$axios.get('/api/your-data')
    const someVariable = response.data
    
    // 创建带自定义header的axios实例
    const myAxios = createCustomAxios(someVariable)
    
    // 用这个实例发起后续请求
    await myAxios.get('/api/another-request')
  }
}
</script>

总结 #

• 如果需要全局共享这个变量（比如多个页面都要用到它设置header），优先选Vuex方案；
• 如果只是单个页面临时使用，直接传递变量的工厂函数方案更轻量化。

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