?

此篇文章是介紹利用 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>

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

20200819代碼優化調整：

程序員都是在不斷成長的，下面的代碼是針對之前使用vuex的部分優化。

?

image.png

模塊引入：
相比之前的模塊引入，這邊也是同樣按照 modules 目錄下，進行的配置。不過是直接通過遍歷文件目錄實現的，不需要再一個個去寫了。

index.js

?

import Vue from 'vue' import Vuex from 'vuex' import getters from './getters'Vue.use(Vuex) // 把modules文件下的 js文件返回出來 // 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里面是所有你想對外報漏的數據

?

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

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

state 里面儲存的為用戶token，name和phoneNo，其中在getters.js里面，可以實現了針對 user 模塊內 name和phoneNo 數值的對外暴露

mutations 里面實現了重置用戶信息，儲存用戶token，儲存name，儲存phoneNo的修改方法；

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

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

類似這樣，就可以在使用頁面內，直接對vuex內，user模塊內的login用戶登陸方法進行調用。
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 = {// 用戶登錄，獲取token，并儲存到cookie里面login({ commit }, userInfo) {return new Promise((resolve, reject) => {commit('SET_PHONENO', '15518270529')resolve()// //調用登錄接口// login().then(response => {// const { data } = response// // 儲存到cookie里面// commit('SET_TOKEN', data.token)// setToken(data.token)// resolve()// }).catch(error => {// reject(error)// })})},//調用獲取用戶信息的接口getInfo({ commit, state }) {return new Promise((resolve, reject) => {//調用獲取用戶信息接口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)})})},//用戶退出登錄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";

?

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

?

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

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

?

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。