时间:2021-05-25
一、vuex是啥?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说,Vuex 类似 Redux 的状态管理器,用来管理Vue的所有组件状态。
当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态。
遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理。这样不管你在何处改变状态,都会通知使用该状态的组件做出相应修改。
vuex大体分为如下几部分:
二、vuex使用
1.首先创建一个vue-cli项目,这里不详述。
vue init webpack mylogin2.安装vuex:
npm install vuex --save3.在src目录下新建文件夹store,用来存放vuex内容
目录结构如下:
4.在main.js中引入vuex
import Vuex from 'vuex'import store from './store'Vue.use(Vuex)5.在store文件夹下新建state.js,vuex用来存储数据
内容如下:
userInfo用来保存用户信息,根据是否有值来判断跳转页面。
6.在store文件夹下新建multation.js,用来修改vuex中存储的数据
内容如下:
7.在store文件夹下新建index.js,用来初始化vuex
内容如下:
此时在浏览器中就可以看到如下(浏览器需增加插件vue devTools):
8.本项目界面如下
主页面和登陆页面
9.login.vue提交方法如下:
submitBtn(){ let me=this; if(!me.user.username||!me.user.pwd){ alert("用户名或密码不能为空"); } else { this.$store.commit('login',this.user); this.$router.push('./'); }}通过commit实现执行multations里刚才定义的login方法。即当点击登陆时state中的userInfo已经被赋值。接下来通过判断此字段是否有值来进行页面跳转。
10.在main.js用router.beforeEach方法对vuex中的userInfo进行判断
router.beforeEach(function(to,from,next){ if(store.state.userInfo||to.path==='/login'){ next(); } else { next({path:'/login'}) }})效果图:
登陆后:
案例地址:https://github.com/myweiwei/vuex-login
将不断更新完善,期待您的批评指正!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了。可以将登录的状态写到webStorage中进行
本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下先看效果:代码:vuex购物车案例importAddFromfrom'./Add.
本案例是基于Vuex的公共数据库,你在了解本案例之前要了解Vuex的使用方法。https://puted:{...mapState(['userDetail']
内容用脚手架快速搭建node项目用mysql连接池实现与数据库的交互用jsonwebtoken实现token身份验证综合案例:用简介登录页面实现上述内容1.快速
SpringBoot+Socket实现与html页面的长连接,客户端给服务器端发消息,服务器给客户端轮询发送消息,附案例源码功能介绍客户端给所有在线用户发送消息