摘要：此文章用于記錄本人學(xué)習(xí)歷程，有共同愛(ài)好者可加好友一起分享。從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時(shí)三個(gè)晚上勉強(qiáng)做了一個(gè)登錄功能。這里的用戶信息和登錄狀態(tài)都是直接取的中的用戶信息進(jìn)行屬性值初始化。

此文章用于記錄本人VUE學(xué)習(xí)歷程，有共同愛(ài)好者可加好友一起分享。
從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時(shí)三個(gè)晚上勉強(qiáng)做了一個(gè)登錄功能。中間的曲折只有自己知道，有兩天調(diào)到晚上1點(diǎn)。
閑話少扯，說(shuō)正經(jīng)的。想做好一個(gè)登錄，你需要用到VUE的VUEX（狀態(tài)存儲(chǔ)），VueRouter（路由切換），還有一些零散的VUE知識(shí)點(diǎn)，比如計(jì)算屬性。由于用VUE開(kāi)發(fā)和以前自己JAVA WEB項(xiàng)目有區(qū)別，登錄狀態(tài)是存儲(chǔ)在瀏覽器的，和前者存在服務(wù)器有一定差別，當(dāng)然也可以用AJAX和服務(wù)器實(shí)時(shí)交互，獲取登錄狀態(tài)與其他信息，所以你這里需要用到瀏覽器的STORAGE。
一：STORAGE，打開(kāi)CHROME的DEVTOOL，在APPLICATION欄，你可以看到如圖一的幾種STORAGE類(lèi)型。具體可以查看博客；

二：VUEX，VUE的狀態(tài)管理插件，具體可查看；
分享自己調(diào)了一晚上才走出來(lái)的彎路 a、store在VUE中是一個(gè)關(guān)鍵字，當(dāng)我IMPORT我的VUEX組件USERSTORE時(shí)，我將其重命名為userstore，而沒(méi)有用store，然后模仿store使用this.$userstore.dispatch調(diào)用我的ACTION，怎么看都感覺(jué)對(duì)，但是就是API看的不仔細(xì)。b、關(guān)于VUEX五個(gè)屬性的關(guān)系，推薦查看：https://zhuanlan.zhihu.com/p/...，講的淺顯易懂，類(lèi)比到位，但學(xué)深還是看官方API比較靠譜。
三：VueRouter，VUE的路由管理插件，用過(guò)STRUTS2的人應(yīng)該知道，他的路由配置作用類(lèi)似STRUTS.XML，具體可查看：
四：計(jì)算屬性，就是根據(jù)輸入計(jì)算輸出，自觸發(fā)的，和METHODS有區(qū)別，具體可查看
五：另外，VUECOMPONENT的靈活應(yīng)用也很重要。
六：本文重點(diǎn)，我的LOGIN實(shí)現(xiàn)原理，源碼地址：

首先我們應(yīng)該理清思路，做一個(gè)登錄功能，我們需要做以下幾步

0、這里少了一步，用戶打開(kāi)頁(yè)面時(shí)，我們需要檢查其瀏覽器是否保存了他的登錄狀態(tài)，若無(wú)，進(jìn)行a操作；
a、輸入用戶信息，并提交；
b、檢查用戶數(shù)據(jù)是否為空，是否符合規(guī)范，若無(wú)，進(jìn)行下一步，表單驗(yàn)證；
c、根據(jù)表單信息進(jìn)行驗(yàn)證，若成功，寫(xiě)瀏覽器storage，并更新用戶登錄狀態(tài)；
d、登錄成功，跳轉(zhuǎn)到主頁(yè)或其他；
1、新建登錄窗口（Login.vue）：

代碼有一個(gè)很簡(jiǎn)單的邏輯，當(dāng)用戶進(jìn)入到這個(gè)APP時(shí)，如果瀏覽器有用戶登錄信息，即渲染歡迎頁(yè)面，否則，渲染登錄頁(yè)面。涉及到表單的提交，那就必須有提交前的檢查和提交后一系列的登錄驗(yàn)證，當(dāng)然，學(xué)習(xí)可以前端做個(gè)假登錄，自己為了好玩，用Java寫(xiě)了個(gè)后臺(tái)，兩者通過(guò)AJAX傳遞數(shù)據(jù)，進(jìn)行登錄驗(yàn)證。既然提到了方法，那接著我們就需要寫(xiě)SCRIPT文件了

上面可以看到，除了VUEX的知識(shí)，其他的都是挺好懂得。所以現(xiàn)在我們來(lái)了解VUEX的狀態(tài)管理。 還是直接上代碼，然后再分析吧，分析見(jiàn)代碼；
import Vue from "vue" //引入VUE和VUEX
import Vuex from "vuex"
Vue.use(Vuex); //這一句很重要，不信可以刪了試試
const userstore = new Vuex.Store({ //新建一個(gè)Vuex.Store對(duì)象
state: { //原始對(duì)象屬性之一

userstate:JSON.parse(sessionStorage.getItem("user")) || {},//用戶信息
loginState:false||(Boolean(JSON.parse(sessionStorage.getItem("user"))))//登錄狀態(tài)

},
mutations: { //原始對(duì)象屬性之一

increment:function(state){  //這是哪個(gè)博客的測(cè)試函數(shù)
    state.count += 2;  
},
userSignin:function(state, user){
        var userstate=state.userstate;
        sessionStorage.setItem("user", JSON.stringify(user));//向?yàn)g覽器存儲(chǔ)寫(xiě)入用戶信息
        state.loginState=true;
        Object.assign(userstate, user);           
},
userSignout:function(state) {
        sessionStorage.removeItem("user");
        state.loginState=false;
        Object.keys(state.userstate).forEach(k => Vue.delete(state.userstate, k))
} 

},
actions:{ //原始對(duì)象屬性之一

increment:function({ dispatch, commit }) {   //這是哪個(gè)博客的測(cè)試函數(shù)
  return commit("increment");  
},
userSignin:function({commit}, user){ //登錄
  console.log("new:"+user.name+"***mima:"+user.id);
    var loginFlag=true; //false
         if(loginFlag){
           commit("userSignin", user);  
         }    
     

},
userSignout:function({commit}) { //退出

 commit("userSignout");

}
}
});
export default userstore; //輸出模板

其實(shí)回頭再仔細(xì)看看，當(dāng)時(shí)自己咋就那么蠢呢，這么簡(jiǎn)單的弄半天。還有另一個(gè)原因，很多VUE相關(guān)的實(shí)例，大神門(mén)都是用ES6語(yǔ)法寫(xiě)的，我這ES5還沒(méi)嚼透的，根本就還沒(méi)看過(guò)什么箭頭函數(shù)，let,con這些新語(yǔ)法，不過(guò)后面真的好好去學(xué)一學(xué)。回到正題，這里的執(zhí)行順序，大概說(shuō)一下。
state：這是狀態(tài)字，APP要用到的全部管理字都需要在這里進(jìn)行先定義好，這也是向其他組件暴露狀態(tài)值的最佳捷徑，后面，計(jì)算屬性，直接和他掛上鉤。這里的userstate（用戶信息）和loginstate（登錄狀態(tài)）都是直接取的SESSIONSTORAGE中的用戶信息進(jìn)行屬性值初始化。
actions：這里是this.$store.dispatch事件分發(fā)的入口，事件是沒(méi)法直接分發(fā)到mutations，這里包含了登錄和退出兩個(gè)ACTIONS，具體實(shí)現(xiàn)用ES5寫(xiě)出了，還是很淺顯易懂的，commit("Mutations")就是執(zhí)行MUTATIONS中的相應(yīng)方法；
mutatons:他和ACTIONS的最大區(qū)別就在于它會(huì)接受 state 作為第一個(gè)參數(shù)，而ACTION不可以，你自己把state加進(jìn)去作為輸入?yún)?shù)，你用console.log打印出來(lái)，可以看到是未定義的，所以官方文檔會(huì)說(shuō)：更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。

至此，好像要講的差不多了，錯(cuò)，我們雖然寫(xiě)了這么多，但怎么把他們結(jié)合好，還需要在Main.js中做如下處理：
import store from "./store/userstore" //引入userstore，別亂起名字了，就用官方的
new Vue({
el: "#app",
router,
store, //全局注冊(cè)該組件
template: "",
components: { App }
})
我們?cè)倩氐絃OGIN.VUE中的方法，現(xiàn)在就可以好好講講我們前面忽略的代碼了
import {mapState} from "vuex" //引入mapState，方便我們直接索引到狀態(tài)值

computed: mapState({ //這是計(jì)算屬性，實(shí)時(shí)獲取state的值，供頁(yè)面渲染用

logstate:"loginState",//這里只所以可以在LOGIN.VUE中獲取USERSTORE的STATE值，
userInfo:"userstate"  //就多虧了mapState

}),
以下兩句，就是調(diào)用userstore中的登錄方法，成功后，跳轉(zhuǎn)到主頁(yè)面
this.$store.dispatch("userSignin",user); //可以暫時(shí)忽略他的存在
this.$router.replace({ path: "/" }) //登錄成功，則跳轉(zhuǎn)到主頁(yè)

好像該講的都講的差不多了，但還差最后一步，就是：用戶打開(kāi)頁(yè)面時(shí)，我們需要檢查其瀏覽器是否保存了他的登錄狀態(tài)，若無(wú)，才進(jìn)行登錄操作；
這里需要在APP入口中，就開(kāi)始檢測(cè):這里需要VUEROUTER和VUEX結(jié)合著用
Vue.use(VueRouter)
router.beforeEach(({meta, path}, from, next) => {

var { auth = true } = meta
var isLogin = Boolean(store.state.loginState) //true用戶已登錄， false用戶未登錄
if (auth && !isLogin && path !== "/Login") {
    return router.replace({ path: "/Login" })
}
next()

})
是不是簡(jiǎn)單易懂。
沒(méi)有買(mǎi)自己的服務(wù)器，只有上兩張自己APP效果截圖，供大家點(diǎn)評(píng)一下