建站
咨詢
售后
建站咨詢
新聞中心
又仔細看了一遍vuex的文檔，還是云里霧里的，不過至少明白它是一個專門管理狀態(tài)的，根據(jù)數(shù)據(jù)狀態(tài)的改變可以驅(qū)動視圖更新，既然是這樣那至少登錄注冊是一種狀態(tài)，就用登錄來做測試，學習vuex,不過話說回來，既然專門管理狀態(tài)，那我至少要仔細推敲一下這個learn的學習項目有那些狀態(tài)邏輯。
1、據(jù)說儲存的vuex store里面的狀態(tài)是臨時的，右鍵刷新一下頁面這些狀態(tài)就銷毀了（這是據(jù)說，請大神解惑我也沒辦法證實），如果是這樣的話，我的用戶狀態(tài)user還是應該要寫入sessionStorage，不然登錄了的一刷新頁面就變成沒登錄了，用戶不就瘋了啊。所以store里面的user狀態(tài)應該要從sessionStorage里面去讀。
2、在這個learn項目中現(xiàn)存的頁面中，home,paroducts,FAQ，login，regin，應該是不需要登錄就可以訪問，而manger和manger以下的子頁面是必須要登錄才可以訪問的。
3、比較特殊的是login和regin，如果用戶已經(jīng)登錄了，再去訪問這2個頁面，原則上來說也是可以的，但如果已經(jīng)登錄了，再用其它賬號來登錄一次，那sessionStorage存在2個user數(shù)據(jù)，那就顯然不合理了，所以應該規(guī)定，如果用戶已經(jīng)登錄，又去訪問login或者regin，那我們應先remove掉sessionStorage里面user數(shù)據(jù)
4、vuex規(guī)定所有狀態(tài)的改變只能依靠mutation，而要驅(qū)動mutation去改變狀態(tài)的只能是action。那在這個項目里登錄狀態(tài)變化只會有登錄、注冊和登出這三種情況，登錄和注冊成功的時候要去執(zhí)行一個存在user的action，登出的時候去執(zhí)行一個不存在user的action。
5、vuex官方還提了一個getter的玩意兒，我感覺應該是在我們需要取用store里面狀態(tài)的時候，確切的說應該是取出這個狀態(tài)之后，給這個狀態(tài)做一些加工改變用的，而且應該只能getter一次吧，多了感覺要亂套啊（不知道這個想法對不對），但看見這樣的寫法this.$store.getters.doneTodosCount，感覺應該可以用不止一次把。估計我想得有點多了，目前看起來也用不上，也許要經(jīng)歷過需要的應用場景才能理解透徹把。
6、還有個module，這個就有點迷了，沒太搞懂，先不管了
預想中store的登錄狀態(tài)還是要從sessionStorage來取的，所以我先把路由約束好，那些頁面需要user，那些不需要，訪問那些頁面需要remove user
打開main.js
添加代碼
// 這個官方名字叫導航守衛(wèi)，挺形象的
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()
}
})
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
文章標題：詳解Vuex管理登錄狀態(tài)-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://ef60e0e.cn/article/depdoi.html
