2021-10-29

简介: 2021-10-29

vuex状态管理


vuex中state存属性


state存放多种状态属性

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state : {
        token : '',
        use : ''
    },
    mutations: {
        set_token(state, token) {
            state.token = token
            sessionStorage.token = token
        },
        del_token(state) {
            state.token = ''
            sessionStorage.removeItem('token')
        }
    },
    actions: {
    },
    modules:{
    }
})


状态管理使用多属性进行登录组件与个人中心组件的自由切换


通过应用state属性进行实例化

<router-link to="/userLogin" v-if="use===''">登录</router-link>
<!--        <a href="/userLogin">登录</a>-->
<!--        <el-button type="primary" plain v-if="use===''">还未登录,点击(<a href="/userlogin">登录</a>)</el-button>-->
<!--        <el-button type="primary" plain v-else>欢迎<a href="/onlyuser">点击进入个人主页</a></el-button>-->
<!--        <router-link to="/userRegister" v-if="use===''">注册</router-link>-->
        <router-link to="/onlyUser" v-else>个人中心</router-link>
 created() {
    this.use = this.$store.state.use
    // if (this.use === '' && this.$route.path !== '/userlogin') {
    //
    // }
  }
homepageClick() {
      if (this.ruleForm.email === '1018703239@qq.com' && this.ruleForm
        .pass === '123') {
        this.$message.success('登录成功')
        this.$store.state.use = '1'
        console.log(this.$store.state.use)
        this.$router.push('/Home')
      } else {
        this.$message.error('登陆失败')
      }
    }


登录组件对state状态属性实例化应用


页面刷新时vuex的信息保存倒sessionstorage中


话不多说,直接上代码,实现页面刷新vuex数据得到保存


  created() {
    let sessionStorage = window.sessionStorage;
    if (sessionStorage.getItem("store") ) {
      this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
      sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
相关文章
|
前端开发 JavaScript 中间件
Express框架快速入门(二)
Express框架快速入门
148 0
Express框架快速入门(二)
|
开发框架 JSON JavaScript
Express框架快速入门(一)
Express框架快速入门
206 0
Express框架快速入门(一)
|
开发框架 JavaScript 前端开发
【node进阶】深度解析之Express框架入门
【node进阶】深度解析之Express框架入门
【node进阶】深度解析之Express框架入门
|
3天前
|
SQL 容灾 关系型数据库
[版本更新] PolarDB-X V2.4 列存引擎开源正式发布
[版本更新] PolarDB-X V2.4 列存引擎开源正式发布!
[版本更新] PolarDB-X V2.4 列存引擎开源正式发布
|
3天前
|
存储 关系型数据库 分布式数据库
数据管理的艺术:PolarDB开源版详评与实战部署策略(二)
PolarDB-PG是阿里云的一款云原生关系型数据库,100%兼容PostgreSQL,支持Oracle语法,采用Shared-Storage存储计算分离架构,提供极致弹性、毫秒级延迟的HTAP能力。具备高可用、高可靠和弹性扩展特性,支持单机、存储计算分离和X-Paxos三节点等多种部署形态。通过Docker可快速部署实例,包括单节点、一主一备和HTAP(一主两备)实例。此外,文章还介绍了在ECS上使用ESSD云盘搭建PolarDB-PG的详细步骤,适合开发和测试环境。
107202 12
|
3天前
|
运维 监控 Cloud Native
如何设计与构建 FinOps 流程、团队、体系与目标
企业 FinOps 实施不是一蹴而就的项目,如果您正在推进企业云原生 FinOps 落地,除了选择合适的技术手段,企业内部的流程和体系建设也尤为重要。
162154 12
|
3天前
|
分布式计算 Java API
Java8 Lambda实现源码解析
Java8的lambda应该大家都比较熟悉了,本文主要从源码层面探讨一下lambda的设计和实现。
162553 8
|
3天前
|
关系型数据库 Serverless 分布式数据库
PolarDB PostgreSQL版Serverless技术原理解读
数据库是现代企业IT系统中非常重要的一部分。在创建数据库时,客户往往需要比较保守地去配置数据库集群的资源,包括CPU、内存、存储以及连接数等多种参数配置,以确保业务能够在波峰和波谷都能平稳运行。在这种情况下,客户购买的集群资源在业务波谷时期会被闲置,导致整体成本偏高;而在业务压力增长阶段,集群资源又应对不足。Serverless数据库可以很好地解决这个问题。它能够让数据库集群资源随客户业务负载动态弹性扩缩,将客户从复杂的业务资源评估和运维工作中解放出来。 本文描述PolarDB PostgreSQL版Serverless的构建中, 如何实现弹得快、弹得准、弹得稳、弹得广的几个关键技术点。
75729 5
PolarDB PostgreSQL版Serverless技术原理解读