“约见”面试官系列之常见面试题第五篇说说vuex登录信息（建议收藏）

此篇文章是介绍利用 vuex 储存用户登录时的相关信息的使用方法。

声明：前面部分是刚开始对vuex的接触，后面部分是学习后对vuex使用的部分优化，想直接用最新的，可以直接找到 20200819 部分。

效果图：

image.png

使用方法：

相关配置文件

image.png

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({//模块引入modules:{user:user}
})

user.js


export const USER_SIGNIN = 'USER_SIGNIN' //登录成功
export const USER_SIGNOUT = 'USER_SIGNOUT' //退出登录
export const USER_INFO_COMMIT = 'USER_INFO_COMMIT' //配合sessionStorage解决vux刷新丢失问题
export default {// 存储状态（变量）state: {userInfo: {},//储存用户相关信息userLogin: false,//用户登录状态},// 对数据获取之前的再次编译，可以理解为state的计算属性 this.$store.getters.方法名。getters: {},// 修改状态，并且是同步的。在组件中使用$store.commit('',params)mutations: {//用户登陆方法[USER_SIGNIN](state, user) {//储存用户相关信息sessionStorage.setItem('userInfo', JSON.stringify(user))sessionStorage.setItem('userLogin', 'true')if (JSON.stringify(user)) {//解决用户信息未及时更新问题Object.assign(state.userInfo, sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : user)//更新用户登录状态state.userLogin = sessionStorage.getItem('userLogin') ? JSON.parse(sessionStorage.getItem('userLogin')) : false}},//用户退出登录方法[USER_SIGNOUT](state) {state.userLogin = false;state.userInfo = {};//清除sessionStorage内的所有记录sessionStorage.clear();},//解决浏览器刷新页面数据丢失问题(根据之前储存的sessionStorage相关信息来判断)[USER_INFO_COMMIT](state) {Object.assign(state.userInfo, sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : {})state.userLogin = sessionStorage.getItem('userLogin') ? JSON.parse(sessionStorage.getItem('userLogin')) : false;},},// 异步操作actions: {[USER_SIGNIN]({ commit }, user) {commit(USER_SIGNIN, user)},[USER_SIGNOUT]({ commit }) {commit(USER_SIGNOUT)},[USER_INFO_COMMIT]({ commit }) {commit(USER_INFO_COMMIT)}}
}

main.js

import store from './store/index' //引入/* eslint-disable no-new */
new Vue({el: '#app',store, //引入router,components: { App },template: '<App/>'
})

配置完成后，就可以直接在vue组件中使用

xxx.vue组件

<template><div style="margin:200px 0"><p>登录状态:{{userLogin}}</p><p>用户信息:{{userInfo}}</p><button @click="loginIn()">登录</button><button @click="loginOut()">退出</button></div>
</template><script>
export default {computed: {userLogin() {if (this.$store.state.user.userLogin) {return this.$store.state.user.userLogin;} else {this.$store.commit("USER_INFO_COMMIT");return this.$store.state.user.userLogin;}},userInfo() {if (this.$store.state.user.userLogin) {return this.$store.state.user.userInfo;} else {this.$store.commit("USER_INFO_COMMIT");return this.$store.state.user.userInfo;}}},data() {return {userMsg: {name: "小明",age: "18",sex: "男"}};},methods: {loginIn() {this.$store.commit("USER_SIGNIN", this.userMsg);},loginOut() {this.$store.commit("USER_SIGNOUT");}}
};
</script><style>
</style>

“约见”面试官系列之常见面试题第五篇说说vuex登录信息（建议收藏）相关推荐

“约见”面试官系列之常见面试题第十七篇之实现深拷贝（建议收藏）
建议最简单的第一种 1.通过 JSON 对象实现深拷贝 this.data = JSON.parse(JSON.stringify(this.vm.$store.state.security.menu ...
“约见”面试官系列之常见面试题第十篇值meta标签（建议收藏）
目录什么是meta标签? meta的作用 meta的必需属性和可选属性必需属性content 可选属性常用meta标签大总结 charset 百度禁止转码 SEO 优化部分 viewport 各 ...
“约见”面试官系列之常见面试题第六篇说说弹性布局（建议收藏）
目录一.基本概念二.容器属性 2.1 flex-direction: 2.2 flex-wrap: 2.3 justify-content: 2.4 align-items: 2.5 ...
“约见”面试官系列之常见面试题第二十篇之vuex得理解（建议收藏）
一.概念 vuex是一个专为vue.js应用程序开发的状态管理模式(它采用集中式存贮管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化). 二.五大核心属性核心属性为:sta ...
“约见”面试官系列之常见面试题第二十七篇之vue-router的重要属性
export default new Router({mode: 'history', //路由模式,取值为history与hashbase: '/', //打包路径,默认为/,可以修改routes: ...
“约见”面试官系列之常见面试题第二十三篇之get和post区别（建议收藏）
POST和GET是HTTP协议中最常用的两种传参方式,这里小小总结一下两者的区别,欢迎补充~! 请求方式 GET POST 参数位置 url的query中一般在content中,query也可参数 ...
“约见”面试官系列之常见面试题第二十一篇之函数防抖和节流（建议收藏）
目录前言概念函数防抖(debounce) 函数节流(throttle) 常见应用场景函数防抖的应用场景函数节流的应用场景实现原理函数防抖(debounce) 函数节流(throttle) ...
“约见”面试官系列之常见面试题第十三篇之css动画效果（建议收藏）
目录 CSS动画简介第一部分:CSS Transition 1.1 基本用法 1.2 transition-delay 1.3 transition-timing-function 1.4 tran ...
“约见”面试官系列之常见面试题第十一篇之canvas（建议收藏）
目录前言介绍小试牛刀应用案例动画 API介绍 Demo 游戏三要素 Demo 截图 API介绍 canvas.style.width 和 canvas.width 的区别 Demo 合成图 ...

“约见”面试官系列之常见面试题第五篇说说vuex登录信息（建议收藏）

“约见”面试官系列之常见面试题第五篇说说vuex登录信息（建议收藏）相关推荐

最新文章

热门文章