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

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

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

首先我們應該理清思路，做一個登錄功能，我們需要做以下幾步

0、這里少了一步，用戶打開頁面時，我們需要檢查其瀏覽器是否保存了他的登錄狀態，若無，進行a操作；
a、輸入用戶信息，并提交；
b、檢查用戶數據是否為空，是否符合規范，若無，進行下一步，表單驗證；
c、根據表單信息進行驗證，若成功，寫瀏覽器storage，并更新用戶登錄狀態；
d、登錄成功，跳轉到主頁或其他；
1、新建登錄窗口（Login.vue）：

代碼有一個很簡單的邏輯，當用戶進入到這個APP時，如果瀏覽器有用戶登錄信息，即渲染歡迎頁面，否則，渲染登錄頁面。涉及到表單的提交，那就必須有提交前的檢查和提交后一系列的登錄驗證，當然，學習可以前端做個假登錄，自己為了好玩，用Java寫了個后臺，兩者通過AJAX傳遞數據，進行登錄驗證。既然提到了方法，那接著我們就需要寫SCRIPT文件了

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

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

},
mutations: { //原始對象屬性之一

increment:function(state){  //這是哪個博客的測試函數
    state.count += 2;  
},
userSignin:function(state, user){
        var userstate=state.userstate;
        sessionStorage.setItem("user", JSON.stringify(user));//向瀏覽器存儲寫入用戶信息
        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:{ //原始對象屬性之一

increment:function({ dispatch, commit }) {   //這是哪個博客的測試函數
  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; //輸出模板

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

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

computed: mapState({ //這是計算屬性，實時獲取state的值，供頁面渲染用

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

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

好像該講的都講的差不多了，但還差最后一步，就是：用戶打開頁面時，我們需要檢查其瀏覽器是否保存了他的登錄狀態，若無，才進行登錄操作；
這里需要在APP入口中，就開始檢測:這里需要VUEROUTER和VUEX結合著用
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()

})
是不是簡單易懂。
沒有買自己的服務器，只有上兩張自己APP效果截圖，供大家點評一下