Vue/vant——user.js中需要用到的属性配置

简介: user.js中需要用到的属性配置

export default {
  state:{
  token:false,
  status:false,
  userInfo:{}
  },
  mutations:{
        // 登陆成功后渲染数据
  login(state,userInfo){
            state.userInfo = userInfo
            state.token = userInfo.token
            state.status = userInfo.status
            window.sessionStorage.setItem('userInfo',JSON.stringify(userInfo))
    window.sessionStorage.setItem('token',JSON.stringify(userInfo.token))
        },
        // 初始化存储
        initUser(state) {
    let userinfo = window.sessionStorage.getItem('userInfo')
    let userInfo = JSON.parse(userinfo)
    if (userInfo) {
    state.userInfo = userInfo
    state.token = userInfo.token
    state.status = userInfo.status
    }
  },
        // 退出登录删除数据
        loginOut(state) {
    state.userInfo = {}
    state.token= false
    state.status= false,
    window.sessionStorage.removeItem('userInfo')
    window.sessionStorage.removeItem('token')
  },
  },
  getters:{},
  actions:{
    },
}

Login.vue 登陆成功后渲染数据

this.$axios({
            method: "post",
            url: "/login",
            data: {
              username: this.username,
              password: this.password,
            },
          }).then((result) => {
              console.log(result);
              if (
                this.username === result.data.data.username ||
                this.password === result.data.data.password
              ) {
                Toast("登陆成功!");
                this.login(result.data.data);
                return this.$router.push("/Myfile");
              } else {
                Toast("账号或密码不正确,请重新输入");
                this.pshow = true;
                return (this.show = false);
              }
            })

app.vue进行初始化

d52e72d30d9948009c55d5dc2e66a353.png

myfile.vue 退出登录删除数据

this.$axios({
            url: "/logout",
            method: "post",
            data: {},
            headers: {
               token: true
              //  token:JSON.parse(sessionStorage.getItem('token'))
            },
          }).then((v) => {
            console.log('1111111111222222');
            console.log(v);
          });
          this.$router.push("/Login");
           setTimeout(() => {
              this.loginOut();
           }, 100);
        })
        .catch(() => {
          //
        });
相关文章
|
15天前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
3天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
163 4
|
15天前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
18天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
18 4
|
19天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
30 3
|
29天前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
28天前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
205 0
|
28天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
129 0