Vue生命周期中mounted和created的区别

Yenull

纯小白菜鸟，我在写一网页，用户注册登录后我将user信息存入localStorage，但是当登录完成、页面跳转的时候，我在另一个页面获取user信息却是空的，我怀疑是生命周期的问题，求解。
注册登录代码如下：

[JavaScript] 纯文本查看 复制代码

register(query).then(res => {
        if (res.data.code === 200) {
          login(query).then(res => {
            console.dir(res)
            if (res.data.code == 200) {
              // 登录成功后发出事件，通知父组件
              // 假设 res.data 包含 token 和用户信息
              const { token, user } = res.data.data;

              // 将 token 和用户信息存入 localStorage
              localStorage.setItem('token', token);
              localStorage.setItem('user', JSON.stringify(user));

              console.dir(token)
              console.dir(user)
            }
          })
          this.$message.success("注册成功,直接登入");
          this.$emit('login-success');
        } else if (res.data.data === 501) {
          this.$message.error(res.data.msg);
        }
      }).catch(error => {
        console.error(error);
      })
    },

这是另一个页面的生命周期函数，

[JavaScript] 纯文本查看 复制代码

mounted() {
    //登录卡bug后使用
    // localStorage.removeItem('authToken');
    // localStorage.removeItem('token');
    // localStorage.removeItem('user');
    
  },
  created() {
    this.getUser();
  },

当我查看日志的时候，却发现，先打印了跳转后页面的日志信息，才打印登录页面的日志信息，不太懂了。

云烟成雨

created在mounted之前，dom尚未渲染，你这个问题不一定是因为生命周期

一只小凡凡

Vue 框架自身已配备了完备的状态管理方案，Vue2 版本用 Vuex，Vue3 版本则用 Pinia，既然选择用 JavaScript 框架来构建前端项目，就理应摒弃以往编写前端代码时的传统固有思维模式，充分利用 Vue 框架所提供的先进状态管理特性

HAVENT

同一个页面 created 在 mounted 之前是没问题的，但如果你在 created 执行一个异步方法，那 mounted 就不一定能获取到 created 异步调用的结果了。

如果都在 Vue 架构中，第二个页面不可能早于第一个页面获取值的，你的问题我是没有看太明白到底是什么情况。

z2ctian

同样在学习vue中

jamescookers988

云烟成雨 发表于 2024-11-29 20:34
created在mounted之前，dom尚未渲染，你这个问题不一定是因为生命周期

大佬猜测是什么问题引起的啊!

忆魂丶天雷

如3楼所说，都已经用vue了那么就直接上全家桶，官方已经推出了对应的状态管理库，建议了解一下pinia

Vvvoun

[JavaScript] 纯文本查看 复制代码

写在login().then(res=>{
  ...
this.$message.success("注册成功,直接登入");
this.$emit('login-success');
})

lucklys

和生命周期没关系

LinLinMu

你这看起来是还没存入的时候就跳转了，login是异步的，和生命周期无关，试试将同this.$emit移到login.then里面