搜尋
首頁web前端js教程關於Vuex管理登入的狀態解析

關於Vuex管理登入的狀態解析

Jun 29, 2018 pm 05:36 PM
vuex登入狀態

這篇文章主要介紹了關於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?

唉喲,不對,我蠢了,這是賦值(不知道說賦值準不準確)嘛,又不是寫一個obj對象,不需要逗號的哈

store.js

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



##跳到了登入頁面,但頭像真的還掛在右上角........,說明store裡面真的還是登入的數據,雖然仔細想想其實這並沒有什麼影響,他要是再一次登入成功,資料自然也就變了,而且一般沒人會這麼去訪問登入頁面,但心裡覺得這樣不對啊。

而且我覺得這個action的分發應該有辦法寫在main.js裡面的,不知道有沒有大神指點一二!

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

使用vue實作點擊按鈕滑出面板

使用vuex的state狀態物件的方式

關於Vuex@2.3.0 中的state 支援函數的申明

以上是關於Vuex管理登入的狀態解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
node.js流帶打字稿node.js流帶打字稿Apr 30, 2025 am 08:22 AM

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

Python vs. JavaScript:性能和效率注意事項Python vs. JavaScript:性能和效率注意事項Apr 30, 2025 am 12:08 AM

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

JavaScript的起源:探索其實施語言JavaScript的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

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

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

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

Python和JavaScript的未來:趨勢和預測Python和JavaScript的未來:趨勢和預測Apr 27, 2025 am 12:21 AM

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

Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

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

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

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

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

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

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

Safe Exam Browser

Safe Exam Browser

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

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

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

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具