脚本宝典收集整理的这篇文章主要介绍了vue vue-router vuex element-ui axios x的学习笔记(十) 完成vuex管理登录状态,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
经过我不懈的思考和实验终于找到了该如何用vuex管理登录状态,效果还可以,虽然在大佬眼里可能知识小儿科
import Vue From 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建基本状态
const state = {
user: JSON.parse(sessionStorage.getITem('user')) || ''
}
// 创建改变状态的方法
const mutations = {
// 登录
LOgin (state) {
state.user = JSON.parse(sessionStorage.getItem('user'))
},
// 登出
LOGOUT (state) {
state.user = ''
}
}
// 创建驱动actions可以使得mutations得以启动
const actions = {
// 这里先来一个驱动LOGIN的东西就叫login吧
login ({commit}) {
commit('LOGIN')
},
// 同样来个logout
logout ({commit}) {
commit('LOGOUT')
}
}
export default new Vuex.Store({
state,
mutations,
actions
})
这样写可以把sessionStorage里面整个user都直接放在store里面,用户密码在返回数据的时候已经强制写成了null,做到这里真想给自己一浪锤,开始做的时候怎么就没想到这样写了?真的是实践出真知啊。
因为已经把action的diapatch写好了,只需要从store读数据就可以了
header.vue
读数据
使用数据
my.vue
先登录
提示登录成功,右上角和mydata都显示出了该有的数据
测试退出登录
提示退出成功,右上角也显示出了登录和注册按钮
测试刷新页面
在登录一次
刷新
刷新是正常的,仍然可以正确获取状态,虽然从图上看不出来。
vuex折腾了几天,也许算勉强入门了吧,按官方的要求应该是写成点击提交之后所有异步操作都写在actions里面,包含发送axios请求这些,然后把登录、注册、登出的state,mutation,actions都写在一个module里面,方便管理,我现在还没这么深入,继续写下去如商品管理,发货管理可以会这么用到,到时候再深入研究一下。
顺便再把footer页面写一下,这样至少看起来像一个完整的页面了
footer.vue