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))
    })
  }
相关文章
|
编译器 C语言 C++
【C语言】realloc()函数详解(动态内存开辟函数)
【C语言】realloc()函数详解(动态内存开辟函数)
394 0
|
JavaScript
JS设置日期为0时0分0秒
项目中经常要给设置默认值,搜索从哪天开始,这时候,如果直接通过new Date()来获取时间,会有时分秒,如果快速设置为0时0分0秒?
629 0
|
Rust JavaScript 前端开发
【Rust 实战】Rust 与 Wasm
【Rust 实战】Rust 与 Wasm
2755 0
【Rust 实战】Rust 与 Wasm
|
Docker 容器
【registry】docker 私有仓库实现https 访问
【registry】docker 私有仓库实现https 访问
1874 2
【registry】docker 私有仓库实现https 访问
Mgo
|
存储 SQL Kubernetes
可观测性革命 - 揭秘OpenObserve开源高性能云原生平台
本文分析OpenObserve 以及其在可观测性方面如何帮助您构建更好的软件并节省观测成本
Mgo
2216 0
|
10月前
|
存储 算法 安全
企业员工数据泄露防范策略:基于 C++ 语言的布隆过滤器算法剖析[如何防止员工泄密]
企业运营过程中,防范员工泄密是信息安全领域的核心议题。员工泄密可能致使企业核心数据、商业机密等关键资产的流失,进而给企业造成严重损失。为应对这一挑战,借助恰当的数据结构与算法成为强化信息防护的有效路径。本文专注于 C++ 语言中的布隆过滤器算法,深入探究其在防范员工泄密场景中的应用。
228 8
|
11月前
|
人工智能 Java 程序员
一文彻底搞定C语言的表达式和语句
本文介绍了C语言中的表达式和语句,涵盖算术、关系等表达式及各类语句的用法,帮助初学者理解核心概念。本文介绍C语言表达式(算术、关系等)和语句(表达式、复合、控制、函数、空语句),助你掌握核心概念。
818 0
一文彻底搞定C语言的表达式和语句
|
前端开发 架构师 算法
技术一号位的方法论《个人篇》——人成长的本质以及如何构建个人成长路线图
不论你是职场新人还是35岁的职场“老人”,成长是每个职场人都绕不开的话题,同时也是贯穿每个人职业生涯的痛点。本文主要帮助读者建立起对个人成长的认知,然后在此认知的基础上让大家理解成长的本质,最终通过文章的引导,来帮助读者完成个人成长路线图的确定以及落地实践。
14043 3
技术一号位的方法论《个人篇》——人成长的本质以及如何构建个人成长路线图
|
JavaScript 前端开发 算法
对比一下Vue2 和 Vue3?—— 8个方面给你答案
本文介绍了 Vue 和 React 的起源、核心思想、表现形式、API 差异、社区差异、升级方向、响应式原理、Diff 算法、事件机制,并进行了总结。Vue 以其渐进式框架设计和简洁性著称,而 React 则强调单向数据流和灵活性。两者均支持组件化开发和虚拟 DOM,适用于不同的开发场景。
263 0
对比一下Vue2 和 Vue3?—— 8个方面给你答案
|
存储 关系型数据库 MySQL
用户案例合集 | 物联网平台的时序数据处理难点与优化实践
本文汇总了四个典型的物联网平台的实践经验,把它们曾面临的数据难题以及解决思路分享给大家。
550 0