這篇文章主要介紹了關於Vuex管理登入的狀態解析,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
又仔細看了一遍vuex的文檔,還是雲裡霧裡的,不過至少明白它是一個專門管理狀態的,根據數據狀態的改變可以驅動視圖更新,既然是這樣那至少登錄註冊是一種狀態,就用登錄來做測試,學習vuex,不過話說回來,既然專門管理狀態,那我至少要仔細推敲一下這個learn的學習專案有那些狀態邏輯。
1、據說儲存的vuex store裡面的狀態是暫時的,右鍵刷新一下頁面這些狀態就銷毀了(這是據說,請大神解惑我也沒辦法證實),如果是這樣的話,我的使用者狀態user還是應該要寫入sessionStorage,不然登入了的一刷新頁面就變成沒登入了,使用者不就瘋了啊。所以store裡面的user狀態應該要從sessionStorage裡面去讀。
2、在這個learn專案中現存的頁面中,home,paroducts,FAQ,login,regin,應該是不需要登入就可以訪問,而manger和manger以下的子頁面是必須要登入才可以存取的。
3、比較特殊的是login和regin,如果用戶已經登入了,再去訪問這2個頁面,原則上來說也是可以的,但如果已經登入了,再用其它帳號來登入一次,那sessionStorage存在2個user數據,那就顯然不合理了,所以應該規定,如果用戶已經登錄,又去訪問login或者regin,那我們應先remove掉sessionStorage裡面user數據
4、vuex規定所有狀態的改變只能依賴mutation,而要驅動mutation去改變狀態的只能是action。那在這個專案裡登入狀態變化只會有登入、註冊和登出這三種情況,登入和註冊成功的時候要去執行一個存在user的action,登出的時候去執行一個不存在user的action。
5、vuex官方也提了一個getter的玩意兒,我感覺應該是在我們需要取用store裡面狀態的時候,確切的說應該是取出這個狀態之後,給這個狀態做一些加工改變用的,而且應該只能getter一次吧,多了感覺要亂套啊(不知道這個想法對不對),但看見這樣的寫法this.$store.getters.doneTodosCount,感覺應該可以用不止一次把。估計我想得有點多了,目前看起來也用不上,也許要經歷過需要的應用場景才能理解透徹把。
6、還有個module,這個就有點迷了,沒太搞懂,先不管了
預想中store的登入狀態還是要從sessionStorage來取的,所以我先把路由約束好,那些頁面需要user,那些不需要,訪問那些頁面需要remove user
打開main.js
// 这个官方名字叫导航守卫,挺形象的 router.beforeEach((to, from, next) => { // 如果是去登录或注册,那就先把user移除 if (to.path === '/login' || to.path === '/regin') { sessionStorage.removeItem('user') } let user = JSON.parse(sessionStorage.getItem('user')) if (!user && (to.path === '/manger/my' || to.path === '/manger/send' || to.path === '/manger/history')) { next({ path: '/login' }) } else { next() } })這樣寫感覺怪怪的,不知道有沒有簡單點的寫法?
#然後一步一步具體寫
是說這需要一個function?
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 创建基本状态 const state = { // 登录状态为没登录 logined: false, // 用户信息数据,目前只需要avatar和name,还是把username也加上吧 LoginedUser: { name: '', avatar: '', username: '' } } // 创建改变状态的方法 const mutations = { // 改变状态的方法也需要2个,一个是登录或注册了,一个是登出了 // 这里不能写箭头函数??? // 登录 LOGIN (state) { // 先让登录状态变为登录了 state.logined = true // 然后去sessionStorage取用户数据 let user = JSON.parse(sessionStorage.getItem('user')) // 再把用户数据发下去 state.LoginedUser.name = user.name state.LoginedUser.avatar = user.avatar state.LoginedUser.username = user.username }, // 登出 LOGOUT (state) { // 这个同理 state.logined = false state.LoginedUser.name = '' state.LoginedUser.avatar = '' state.LoginedUser.username = '' } } // 创建驱动actions可以使得mutations得以启动 const actions = { // 这里先来一个驱动LOGIN的东西就叫login吧 // 这个context是官方写的,应该叫什么无所谓 login (context) { context.commit('LOGIN') }, // 同样来个logout logout (context) { context.commit('LOGOUT') } } export default new Vuex.Store({ state, mutations, actions })

不對還應該要把action掛到該掛的地方,然後該引用store狀態的地方引用store的資料
先去登入頁面掛action
##然後是登出的頁面
header.vue
#同時我們就不在創建頁面的時候從sessionStorage取資料了
#還有一個main.js
要是不能在main.js裡面生效還真是麻煩啊,試想一下,已登入使用者直接去了/login頁面,seeionStorage裡面使用者資料清除了,但store裡面的資料又沒更新,那在頭部不是還掛一個頭像啊???
還有一步取得store裡面的資料
#header.vue
還是趕快測試一下吧
哭了.....直接四個錯誤
這我都是照著官方說的寫的啊
把header.vue的資料註解掉,還有一個錯誤
但這個dispatch 是undefined 是啥意思啊,我是照著寫的啊,大佬幫我解惑一下啊
把dispatch改成context 也不行
改成commit 試試看
還是一樣沒脾氣了,我再去看看資料吧
研究了好久解決了一部分問題
首先我把store.js,裡面的action寫成了這樣
但我覺得原來的寫法也沒有錯
然後在main.js裡面註解掉了這句
然後就正常了,dispatch是正確的,所以我所擔心的事果然發生了
先去登入
可以看見header右上方的確立刻變成了使用者訊息,達到了要求,然而我要是自己去網址列輸入/login
以上是關於Vuex管理登入的狀態解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

Node.js擅長於高效I/O,這在很大程度上要歸功於流。 流媒體匯總處理數據,避免內存過載 - 大型文件,網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具