首頁 > 文章 > web前端 > 關於Vuex管理登入的狀態解析

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

不言原創: 2018-06-29 17:36:492145瀏覽

這篇文章主要介紹了關於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 === &#39;/login&#39; || to.path === &#39;/regin&#39;) {
  sessionStorage.removeItem(&#39;user&#39;)
 }
 let user = JSON.parse(sessionStorage.getItem(&#39;user&#39;))
 if (!user && (to.path === &#39;/manger/my&#39; || to.path === &#39;/manger/send&#39; || to.path === &#39;/manger/history&#39;)) {
  next({ path: &#39;/login&#39; })
 } else {
  next()
 }
})

這樣寫感覺怪怪的，不知道有沒有簡單點的寫法？

#然後一步一步具體寫

是說這需要一個function?

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

store.js

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;

Vue.use(Vuex)
// 创建基本状态
const state = {
 // 登录状态为没登录
 logined: false,
 // 用户信息数据,目前只需要avatar和name,还是把username也加上吧
 LoginedUser: {
  name: &#39;&#39;,
  avatar: &#39;&#39;,
  username: &#39;&#39;
 }
}
// 创建改变状态的方法
const mutations = {
 // 改变状态的方法也需要2个，一个是登录或注册了，一个是登出了
 // 这里不能写箭头函数???
 // 登录
 LOGIN (state) {
  // 先让登录状态变为登录了
  state.logined = true
  // 然后去sessionStorage取用户数据
  let user = JSON.parse(sessionStorage.getItem(&#39;user&#39;))
  // 再把用户数据发下去
  state.LoginedUser.name = user.name
  state.LoginedUser.avatar = user.avatar
  state.LoginedUser.username = user.username
 },
 // 登出
 LOGOUT (state) {
  // 这个同理
  state.logined = false
  state.LoginedUser.name = &#39;&#39;
  state.LoginedUser.avatar = &#39;&#39;
  state.LoginedUser.username = &#39;&#39;
 }
}
// 创建驱动actions可以使得mutations得以启动
const actions = {
 // 这里先来一个驱动LOGIN的东西就叫login吧
 // 这个context是官方写的，应该叫什么无所谓
 login (context) {
  context.commit(&#39;LOGIN&#39;)
 },
 // 同样来个logout
 logout (context) {
  context.commit(&#39;LOGOUT&#39;)
 }
}

export default new Vuex.Store({
 state,
 mutations,
 actions
})