?

此篇文章是介紹利用 vuex 儲(chǔ)存用戶(hù)登錄時(shí)的相關(guān)信息的使用方法。

聲明：前面部分是剛開(kāi)始對(duì)vuex的接觸，后面部分是學(xué)習(xí)后對(duì)vuex使用的部分優(yōu)化，想直接用最新的，可以直接找到 20200819 部分。

效果圖：

image.png

使用方法：

相關(guān)配置文件

?

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刷新丟失問(wèn)題 export default {// 存儲(chǔ)狀態(tài)（變量）state: {userInfo: {},//儲(chǔ)存用戶(hù)相關(guān)信息userLogin: false,//用戶(hù)登錄狀態(tài)},// 對(duì)數(shù)據(jù)獲取之前的再次編譯，可以理解為state的計(jì)算屬性 this.$store.getters.方法名。getters: {},// 修改狀態(tài)，并且是同步的。在組件中使用$store.commit('',params)mutations: {//用戶(hù)登陸方法[USER_SIGNIN](state, user) {//儲(chǔ)存用戶(hù)相關(guān)信息sessionStorage.setItem('userInfo', JSON.stringify(user))sessionStorage.setItem('userLogin', 'true')if (JSON.stringify(user)) {//解決用戶(hù)信息未及時(shí)更新問(wèn)題Object.assign(state.userInfo, sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : user)//更新用戶(hù)登錄狀態(tài)state.userLogin = sessionStorage.getItem('userLogin') ? JSON.parse(sessionStorage.getItem('userLogin')) : false}},//用戶(hù)退出登錄方法[USER_SIGNOUT](state) {state.userLogin = false;state.userInfo = {};//清除sessionStorage內(nèi)的所有記錄sessionStorage.clear();},//解決瀏覽器刷新頁(yè)面數(shù)據(jù)丟失問(wèn)題(根據(jù)之前儲(chǔ)存的sessionStorage相關(guān)信息來(lái)判斷)[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>登錄狀態(tài):{{userLogin}}</p><p>用戶(hù)信息:{{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>

🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊

20200819代碼優(yōu)化調(diào)整：

程序員都是在不斷成長(zhǎng)的，下面的代碼是針對(duì)之前使用vuex的部分優(yōu)化。

?

image.png

模塊引入：
相比之前的模塊引入，這邊也是同樣按照 modules 目錄下，進(jìn)行的配置。不過(guò)是直接通過(guò)遍歷文件目錄實(shí)現(xiàn)的，不需要再一個(gè)個(gè)去寫(xiě)了。

index.js

?

import Vue from 'vue' import Vuex from 'vuex' import getters from './getters'Vue.use(Vuex) // 把modules文件下的 js文件返回出來(lái) // https://webpack.js.org/guides/dependency-management/#requirecontext const modulesFiles = require.context('./modules', true, /\.js$/)// you do not need `import app from './modules/app'` // it will auto require all vuex module from modules file const modules = modulesFiles.keys().reduce((modules, modulePath) => {// set './app.js' => 'app'const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')const value = modulesFiles(modulePath)modules[moduleName] = value.defaultreturn modules }, {})const store = new Vuex.Store({modules,getters })export default store

getters.js
getters.js里面是所有你想對(duì)外報(bào)漏的數(shù)據(jù)

?

const getters = {name: state => state.user.name,phoneNo: state => state.user.phoneNo, } export default getters

user.js
login, logout, getInfo 相當(dāng)于針對(duì)用戶(hù)的一些api接口；(可以忽視掉)

state 里面儲(chǔ)存的為用戶(hù)token，name和phoneNo，其中在getters.js里面，可以實(shí)現(xiàn)了針對(duì) user 模塊內(nèi) name和phoneNo 數(shù)值的對(duì)外暴露

mutations 里面實(shí)現(xiàn)了重置用戶(hù)信息，儲(chǔ)存用戶(hù)token，儲(chǔ)存name，儲(chǔ)存phoneNo的修改方法；

actions 里面是針對(duì)用戶(hù)登錄，獲取用戶(hù)信息，以及用戶(hù)退出登陸的異步方法。此處你會(huì)看到有使用 Promise 異步操作，主要用于使用過(guò)程中的 await數(shù)據(jù)等待處理。 不太理解async/await 的可 參考此篇文章。

namespaced: true，主要是為了解決不同模塊命名沖突的問(wèn)題，將不同模塊的namespaced:true，之后在不同頁(yè)面中引入getter、actions、mutations時(shí)，需要加上所屬的模塊名。

類(lèi)似這樣，就可以在使用頁(yè)面內(nèi)，直接對(duì)vuex內(nèi)，user模塊內(nèi)的login用戶(hù)登陸方法進(jìn)行調(diào)用。
this.$store.dispatch("user/login");

?

import { login, logout, getInfo } from '@/api/user' import { getToken, setToken, removeToken } from '@/utils/auth'const getDefaultState = () => {return {token: getToken(),name: "",phoneNo: "",} }const state = getDefaultState()const mutations = {RESET_STATE: (state) => {Object.assign(state, getDefaultState())},SET_TOKEN: (state, token) => {state.token = token},SET_NAME: (state, name) => {state.name = name},SET_PHONENO: (state, phoneNo) => {state.phoneNo = phoneNo}, }const actions = {// 用戶(hù)登錄，獲取token，并儲(chǔ)存到cookie里面login({ commit }, userInfo) {return new Promise((resolve, reject) => {commit('SET_PHONENO', '15518270529')resolve()// //調(diào)用登錄接口// login().then(response => {// const { data } = response// // 儲(chǔ)存到cookie里面// commit('SET_TOKEN', data.token)// setToken(data.token)// resolve()// }).catch(error => {// reject(error)// })})},//調(diào)用獲取用戶(hù)信息的接口getInfo({ commit, state }) {return new Promise((resolve, reject) => {//調(diào)用獲取用戶(hù)信息接口getInfo().then(response => {const { data } = responseif (!data) {reject('Verification failed, please Login again.')}const { name, phoneNo } = datacommit('SET_PHONENO', phoneNo)commit('SET_NAME', name)resolve(data)}).catch(error => {reject(error)})})},//用戶(hù)退出登錄logout({ commit, state }) {return new Promise((resolve, reject) => {logout(state.token).then(() => {removeToken() // must remove token firstcommit('RESET_STATE')resolve()}).catch(error => {reject(error)})})}, }export default {namespaced: true,state,mutations,actions }

xxx.vue組件

?

import { mapGetters } from "vuex";

?

//計(jì)算屬性computed:{//通過(guò)getter.js對(duì)外暴露的 phoneNo 值進(jìn)行使用// {{phoneNo}} 數(shù)值使用...mapGetters(['phoneNo'])},

?

methods: {async isLogin() {//使用 try/catch 抓取錯(cuò)誤信息，如果登陸失敗則會(huì)輸出錯(cuò)誤信息，不往下執(zhí)行try {await this.$store.dispatch("user/login");//如果登陸成功才會(huì) 輸出 ‘登陸成功’console.log('登陸成功')} catch (error) {console.log(error);}}}

本面試題為前端?？济嬖囶}，后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠，一個(gè)沉迷于故事的講述者。

歡迎一起私信交流。

?

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第五篇说说vuex登录信息（建议收藏）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。