- 目標：實現(xiàn)“主頁”作岖、“用戶登錄”唆垃、“用戶登出”和“用戶信息”四個頁面，主頁根據(jù)用戶登錄情況鳍咱，展現(xiàn)不同信息降盹，用戶信息和登出頁面需要用戶已經(jīng)登錄的狀態(tài)。
- 目的：初步掌握vue谤辜、vuex和vue-router蓄坏，貫通vue單頁面應用流程與配置
- 頁面：
- 首頁
- 用戶信息頁
- 登出
1.用戶狀態(tài)管理
采用vuex儲存，在每一個mutations中不僅改變用戶狀態(tài)丑念，而且使用sessionStorage存儲用戶信息
每個分頁面通過store的state判斷用戶是否已登錄
2.vue-router
- 利用導航鉤子判斷路由元信息是否包含登錄驗證
- 動態(tài)路由匹配
3.ajax
可采用vue-resourse或axios
總結(jié)
總結(jié)起來涡戳，其實用到的東西并不多，但是一開始寫還是很多沒有思路脯倚，慢慢有思路渔彰，對照官方文檔就好嵌屎。
遇到的問題：vuex用到module，因此在往state里添加信息的時候注意要先索引module的名稱
不足之處
每個頁面用的公共header恍涂，本想放置到app.vue中去宝惰，但是登錄了以后發(fā)現(xiàn)雖然store的state變化了，但是header雖然依據(jù)了state狀態(tài)再沧，但并未發(fā)生改變尼夺，嘗試多種寫法無效后，把每個頁面都添加了header組件炒瘸，這樣跳轉(zhuǎn)的時候header狀態(tài)自然發(fā)生了變化淤堵。
具體參見項目地址
