Vue项目中如何将Product.vue接口返回数据传递给同级productData.js

第一步：调整productData.js代码 #

你需要把内部存储的data也对外暴露，才能在外部获取到值，调整后代码如下：

// productData.js
let data = null;

function initData(apiRes) {
  data = apiRes;
  console.log(data);
  // 对数据进行相关操作
}

// 新增获取data的方法，避免直接暴露data被外部意外修改
function getData() {
  return data;
}

// 你原来写在这里的顶层console.log(data)是同步执行的，此时initData还未被调用，永远会输出null，建议删除
export { initData, getData };

如果不担心数据被外部篡改，也可以直接导出data变量。

第二步：修改Product.vue的接口逻辑 #

在接口请求拿到结果后，调用从productData.js导入的initData方法传入返回值即可：

<script>
// 顶部导入对应方法，注意路径要和你实际的文件相对位置匹配
import { initData } from './productData.js'

export default {
  // 其他组件配置省略
  beforeCreate() {
    const productId = this.$route.params.id;
    axios
      .get("/localhost/api/product/" + productId)
      .then((res) => {
        console.log(res.data);
        // 传入接口返回结果初始化productData里的存储值
        initData(res.data)
      })
      .catch((error) => {
        console.log(error);
      });
  },
}
</script>

注意事项 #

接口请求是异步操作，所有需要用到productData里存储数据的逻辑，必须保证执行时机在接口请求完成、initData已经被调用之后，否则拿到的还是初始值null。

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