前端 - nextjs,如何不同路由之间共享数据？

Question

调用第三方接口获取的用户信息。我想保存下来。然后再提供个查询用户信息的接口。

class UserInfoStore {  userInfo: any = {    apps: [],  };  setUserInfo(newUserInfo: any) {    Object.keys(newUserInfo).forEach((key) => {      this.userInfo[key] = newUserInfo[key];    });    console.log('setUserInfo 2222', this.userInfo, this);  }  getUserInfo() {    console.log('getUserInfo 2222', this.userInfo, this);    return this.userInfo;  }}const userInfo = new UserInfoStore();export default userInfo;

然后我再获取的时候赋值。 userInfo.setUserInfo(userinfo);
然后再提供个get接口

import { NextApiRequest, NextApiResponse } from 'next';import userInfo from '@/stores/userInfoStore';const getUserInfoAPI = async (req: NextApiRequest, res: NextApiResponse) => {  const data = userInfo.getUserInfo();  console.log('getUserInfo', data);  const { appId } = req.body;  const apps = data?.apps || [];  if (apps.includes(appId)) {    res.status(200).json({      success: true,      data: data,      code: 200,    });  } else {    res.status(401).json({      success: false,      data: data,      code: 200,    });  }};export default getUserInfoAPI;

看着好像没问题。set的时候能打印到值。get的时候就没了。

Answer 1

从你提供的代码来看，UserInfoStore类的getUserInfo()方法返回的是this.userInfo，这是一个对象。在JavaScript中，对象是引用类型，不是值类型。这意味着当你将this.userInfo赋值给其他变量时，实际上是复制了引用，而不是对象本身。

在你的代码中，getUserInfoAPI函数中通过const data = userInfo.getUserInfo();获取到的data实际上是this.userInfo的一个副本。当你后续在getUserInfoAPI函数中对data进行操作时，不会影响到this.userInfo的值。

如果你希望在获取用户信息时能够改变this.userInfo的值，你需要返回一个新对象，而不是当前对象的引用。你可以通过返回Object.assign({}, this.userInfo)来实现这一点，这样你就可以在获取用户信息时保持对原始数据的引用，同时不会影响到原始数据。

以下是修改后的代码：

class UserInfoStore {  userInfo: any = {    apps: [],  };  setUserInfo(newUserInfo: any) {    Object.keys(newUserInfo).forEach((key) => {      this.userInfo[key] = newUserInfo[key];    });    console.log('setUserInfo 2222', this.userInfo, this);  }  getUserInfo() {    console.log('getUserInfo 2222', this.userInfo, this);    // 返回一个新对象，而不是当前对象的引用    return Object.assign({}, this.userInfo);  }}const userInfo = new UserInfoStore();export default userInfo;

然后你再获取的时候赋值。 userInfo.setUserInfo(userinfo);
然后再提供个get接口

import { NextApiRequest, NextApiResponse } from 'next';import userInfo from '@/stores/userInfoStore';const getUserInfoAPI = async (req: NextApiRequest, res: NextApiResponse) => {  const data = userInfo.getUserInfo();  console.log('getUserInfo', data);  const { appId } = req.body;  const apps = data?.apps || [];  if (apps.includes(appId)) {    res.status(200).json({      success: true,      data: data,      code: 200,    });  } else {    res.status(401).json({      success: false,      data: data,      code: 200,    });  }};export default getUserInfoAPI;