首页 / VUE / Vuex管理登录状态的分析

Vuex管理登录状态的分析

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vuex管理登录状态的分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5002字，纯文字阅读大概需要8分钟。

内容图文

本文主要介绍了详解Vuex管理登录状态,仔细看了一遍vuex的文档，还是云里雾里的，不过至少明白它是一个专门管理状态的，根据数据状态的改变可以驱动视图更新，既然是这样那至少登录注册是一种状态，就用登录来做测试，学习vuex,不过话说回来，既然专门管理状态，那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑。

Vuex管理登录状态的分析 - 文章图片

1、据说储存的vuex store里面的状态是临时的，右键刷新一下页面这些状态就销毁了（这是据说，请大神解惑我也没办法证实），如果是这样的话，我的用户状态user还是应该要写入sessionStorage，不然登录了的一刷新页面就变成没登录了，用户不就疯了啊。所以store里面的user状态应该要从sessionStorage里面去读。

2、在这个learn项目中现存的页面中，home,paroducts,FAQ，login，regin，应该是不需要登录就可以访问，而manger和manger以下的子页面是必须要登录才可以访问的。

3、比较特殊的是login和regin，如果用户已经登录了，再去访问这2个页面，原则上来说也是可以的，但如果已经登录了，再用其它账号来登录一次，那sessionStorage存在2个user数据，那就显然不合理了，所以应该规定，如果用户已经登录，又去访问login或者regin，那我们应先remove掉sessionStorage里面user数据

4、vuex规定所有状态的改变只能依靠mutation，而要驱动mutation去改变状态的只能是action。那在这个项目里登录状态变化只会有登录、注册和登出这三种情况，登录和注册成功的时候要去执行一个存在user的action，登出的时候去执行一个不存在user的action。

5、vuex官方还提了一个getter的玩意儿，我感觉应该是在我们需要取用store里面状态的时候，确切的说应该是取出这个状态之后，给这个状态做一些加工改变用的，而且应该只能getter一次吧，多了感觉要乱套啊（不知道这个想法对不对），但看见这样的写法this.$store.getters.doneTodosCount，感觉应该可以用不止一次把。估计我想得有点多了，目前看起来也用不上，也许要经历过需要的应用场景才能理解透彻把。

6、还有个module，这个就有点迷了，没太搞懂，先不管了

预想中store的登录状态还是要从sessionStorage来取的，所以我先把路由约束好，那些页面需要user，那些不需要，访问那些页面需要remove user

打开main.js

添加代码

这样写感觉怪怪的，不知道有没有简单点的写法？

不过想要的效果是能达到的

然后尝试写store

先写个基本结构

Vuex管理登录状态的分析 - 文章图片

然后一步一步具体写

Vuex管理登录状态的分析 - 文章图片

是说这需要一个function?

唉哟，不对，我蠢了，这是赋值（不知道说赋值准不准确）嘛，又不是写一个obj对象，不需要逗号的哈

store.js

我感觉应该就这样就可以了吧，还是要测试一下

不对还应该要把action挂到该挂的地方，然后该引用store状态的地方引用store的数据

先去登录页面挂action

Vuex管理登录状态的分析 - 文章图片

应该是这样的，注册也是一样

Vuex管理登录状态的分析 - 文章图片

然后是登出的页面

header.vue

Vuex管理登录状态的分析 - 文章图片

同时我们就不在创建页面的时候从sessionStorage取数据了

还有一个main.js

Vuex管理登录状态的分析 - 文章图片

要是不能在main.js里面生效还真是麻烦啊，试想一下，已登录用户直接去了/login页面，seeionStorage里面用户数据清除了，但store里面的数据又没更新，那在头部不是还挂一个头像啊???

还有一步获取store里面的数据

header.vue

Vuex管理登录状态的分析 - 文章图片

还是赶紧测试一下吧

哭了.....直接四个错误

Vuex管理登录状态的分析 - 文章图片

这我都是照着官方说的写的啊

Vuex管理登录状态的分析 - 文章图片

把header.vue的数据注释掉，还有一个错误

Vuex管理登录状态的分析 - 文章图片

但这个dispatch 是undefined 是啥意思啊，我是照着写的啊，大佬帮我解惑一下啊

Vuex管理登录状态的分析 - 文章图片

把dispatch 改成context 也不行

改成commit 试一下

Vuex管理登录状态的分析 - 文章图片

还是一样没脾气了，我再去看看资料吧

研究了好久解决了一部分问题

首先我把store.js，里面的action写成了这样

Vuex管理登录状态的分析 - 文章图片

但我觉得原来的写法也没有错

然后在main.js里面注释掉了这句

Vuex管理登录状态的分析 - 文章图片

然后就正常了，dispatch是正确的，所以我所担心的事果然发生了

先去登录

Vuex管理登录状态的分析 - 文章图片

可以看见header右上方的确立刻变成了用户信息，达到了要求，然而我要是自己去地址栏输入/login

Vuex管理登录状态的分析 - 文章图片

跳到了登录页面，但头像真的还挂在右上角........，说明store里面真的还是登录的数据，虽然仔细想想其实这并没有什么影响，他要是再一次登录成功，数据自然也就变了，而且一般没人会这么去访问登录页面，但心里觉得这样不对啊。

而且我觉得这个action的分发应该有办法写在main.js里面的，不知道有没有大神指点一二！

内容总结

以上是互联网集市为您收集整理的Vuex管理登录状态的分析全部内容，希望文章能够帮你解决Vuex管理登录状态的分析所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/297095.html

来源：【匿名】

【上一篇】Vue.js最全用法详解【下一篇】php怎么返回数据给vue

更多 ►

【Vuex管理登录状态的分析】教程文章相关的互联网学习教程文章

vue-cli项目结构分析【图】

总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。文件结构细分1.build——[webpack配置]build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。2.config——[vue项目配置]config文件主要是项目相关配置，我们常用的就是当端口冲突时配...

Vue.js 源码学习笔记 -- 分析前准备待续【代码】

主体　　实例方法归类:　　　　data 数据方法　　　　dom dom方法　　　　event 事件处理　　　　lifecycl 生命周期函数　　　　init 初始化vue页面　　全局方法:　　　　derectives filters init过程 data : observer deps computed watch || watcher template: fragment [ directive repeat if component transition filter ]重点: 把数据(Model) 和视图(View) 建立关联1. 通过observer 对 data 监听, 包括监听...

vue-cli构建项目得到的文件分析以及优化

参考文章： https://segmentfault.com/q/1010000008832754原文：http://www.cnblogs.com/zhuzhenwei918/p/6943147.html

vue插件开发之-vue.use()的源码分析。【代码】【图】

vue是一个渐进式框架，它本身的核心是解决视图渲染的问题，其它的能力就通过插件的方式来解决。今天我们来看下vue是如何支持框架的。也就是vue.use这部分的实现。下面我们以vue-router为例来进行说明，import VueRouter from ‘vue-router‘ Vue.use(VueRouter)这段代码大家用过vue-router插件的应该很熟悉了。vue-router就是vue的一个插件了。然后我们首先来看下vue.use的源码实现。首先，我们看下vue.use()的入参要求。1，含有i...

关于vue-router，路由重定向的使用分析【图】

看之前的项目，突然发现一个不算bugd的bug，之前也是一直没有想到，现在发现之后越来越觉得有必要改掉，如图，项目用的是vue做的，自然切换用的就是路由，一级路由包括：首页、记录和个人中心，二级路由是在记录下面的三个报修记录，如上图路由分配，一级路由重定向到index，二级重定向至repair，一直觉得这样没什么问题，结果有次突然点到第三方租赁页，然后又点到个人中心，这是呢，我又想看看刚刚租赁页的信息，这时，由于路由重...

vue+drf 电商生鲜项目分析【代码】

一。项目的初始化　　用虚拟环境安装github上项目的开发环境二。settings.py:# 数据库的设置都是固定的 DATABASES = {‘default‘: {‘ENGINE‘: ‘django.db.backends.mysql‘,‘NAME‘:‘mxshop‘, # 要连接的数据库，连接前需要创建好‘USER‘:‘user‘,# 连接数据库的用户名‘PASSWORD‘:‘passw‘,# 连接数据库的密码‘HOST‘:‘192.168.1.1‘, # 连接主机，默认本级‘PORT‘:3306, # 端口默认3306"OPTIONS":{"init_comman...

Vue 目录结构分析数据绑定绑定属性循环渲染数据数据渲染

一、目录结构分析node_modules　　项目所需要的各种依赖src　　开发用的资源assets　　静态资源文件App.vue　　根组件main.js　　配置路由时会用.babelrc　　配置文件.editorconfig　　编辑器的配置文件.gitignore　　忽略的配置文件index.html　　html入口文件，一般写移动端在这里添加package.json　　项目配置文件，管理名称描述作者版本号之类的readme.md　　项目的说明文件webpack.config.js　　webpack的配置文件将.vue的文...

vue单页缓存方案分析及实现【图】

实现全站的页面缓存，前进刷新，返回走缓存，并且能记住上一页的滚动位置，参考了很多技术实现，github上的导航组件实现的原理要么使用的keep-alive，要么参考了keep-alive的源码，但是只用keep-alive没法实现相同path，不同参数展示不同view，这就有点坑了，所以需要结合自己要实现的功能，适当改造keep-alive，为了实现每次前进都能刷新，返回走缓存还能自动定位的功能，文章陆续从以下几个方面展开讲：两套技术方案可选，最后定...

基于vue通用表单解决方案的思考与分析【图】

前言 “那要怎么改？”，“那得改到什么时候？”，“什么时候才能支持这些功能？”。再一次听到了这样的话，我沉默了。到底要怎样改，这也是我所思考的，最近一直忙于其他，已经有一段时间没有处理 issue 了，趁着调休，我也要好好思考下。半年前，接触了 el-form-renderer ，瞬间感觉减轻了大部分表单编写的工作，一个简单的JSON配置，立刻展现出一个功能完好的表单页面。然而，随着使用的频率增加，却慢慢开始暴露各种不足，该...

Vue 动态设置路由参数的案例分析

在vue中可以动态设置路由参数： 1.使用this.$router.go()，与js histroy.go() 用法一直,前进1，后退-1，当前页面:0 注意使用go时必须是已经有访问历史记录了案例： <template><div> <button @click="goht">后退<button> <br/><button @click="goqj">前进<button> <br/><button @click="gosx">刷新当前<button></div></template><script>export default {methods: {goht(){this.$router.go(-1);},goqj(){this.$router.go(1);},g...

vue-cli webpack配置文件分析

相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。过完年回来后，我接手了公司的新项目。新项目是一个spa。很自然，我就想到了vue-cli脚手架了，当时研究一下它的webpack配置。于是，就有了其他的内容。今天这篇文章，是在原来的基础上，增加了一些新版本的内容，但实质上变化不大。说明此仓库为vue-cli webpack的配置分析，其实只是在源码中加上注释而已。大家查看详细分析，可以...

Vue自定义指令及指令定义函数的具体分析（代码）

Vue自定义指令可以在全局或局部定义，Vue组件是html和代码的复用，而Vue指令是对DOM的扩展复用；下面我们就来具体看看对Vue中自定义指令的分析。1、Vue自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项注册局部自定义指令。2、Vue 钩子函数：指令定义函数提供了几个钩子函数（可选）：bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始...

vue嵌套路由与404重定向实现方法分析_vue.js【图】

这次给大家带来怎样使用vue嵌套路由，使用vue嵌套路由的注意事项有哪些，下面就是实战案例，一起来看一下。第一部分： vue嵌套路由嵌套路由是什么？嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。比如在vue中，我们如果不使用嵌套路由，那么只有一个<router-view>，但是如果使用，那么在一个组件中就还有<router-view>，这也就构成了嵌套。为什么要使用嵌套路由？就比如在一个页面中， ...

vue.js计算属性computed用法实例分析【图】

本文实例讲述了vue.js计算属性computed用法。分享给大家供大家参考，具体如下：需求：数据msg值为12345，我们现在需要反向显示成54321。在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div ...

Vue源码中钩子函数的学习分析【图】

本篇文章分享给大家的内容是关于Vue源码中钩子函数的学习分析，内容很详细，接下来我们就来看看具体的内容，希望可以帮助到大家。Vue实例在不同的生命周期阶段，都调用了callHook方法。比如在实例初始化（_init）的时候调用callHook(vm, beforeCreate)和callHook(vm, created)。这里的"beforeCreate","created"状态并非随意定义，而是来自于Vue内部的定义的生命周期钩子。var LIFECYCLE_HOOKS = [beforeCreate,created,beforeMount...

首页 / VUE / Vuex管理登录状态的分析

Vuex管理登录状态的分析

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vuex管理登录状态的分析】教程文章相关的互联网学习教程文章

VUEX - 相关标签

状态 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程