vue+element 学习之路（四）Vuex+SessionStorage存储登录状态和信息

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
以我自己的理解来说，Vuex相当于一个可以储存全局变量的容器，应用场景大多数是登录时，全局存储用户信息，判断登录状态和储存 UserId 这些字段

安装Vuex

npm install -s vuex

编写store组件

在主入口main.js文件中记得引入

解析1：
state 状态树 state中定义的变量不能轻易被更改
解析2：
mutations中采用 this.$store.commit(“定义的方法名”) 进行调用 更改state中的变量（唯一变更state的方法）

源码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        token:'',
        userId:'',
        userInfo:{
            
        }
    },
    mutations:{
        ['setToken'](state,token){
            sessionStorage.setItem("token",token);
            state.token = token;
        },
        ['removeToken'](state,token){
            sessionStorage.removeItem("token",token);
            state.token = token;
        },
        ['setUserId'](state,userId){
            sessionStorage.setItem("userId",userId);
            state.userId = userId;
        }
    }
})

登录页

login.vue

简易写一个接口

控制台显示：

源码

<template>
    <div>
        <el-row>
            <el-col :span='8' :offset='8'>
                <el-card class="box-card" shadow="always">
                    <el-row style="margin-bottom:25px">
                        <h1 style="color:#409EFF;text-align:center">登录</h1>
                    </el-row>
                    <el-row>
                        <el-form ref="form" :model="user">
                            <el-form-item>
                                <el-input placeholder="登录名...." v-model="user.username"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input type="password" placeholder="密码...." v-model="user.password">
                                    <i class="el-icon-view"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-checkbox label="记住我" name="type"></el-checkbox>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" style="width:100%" @click="login()">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.box-card{
    border-radius: 4px;
    margin-top: 150px;
    width: 100%;
    height: 400px;
}
el-input{
    text-align: center;
}
</style>

<script>
import qs from 'qs'
export default {
    name:'Login',
    data(){
        return{
            user:{}
        }
    },
    methods:{
        login(){
             let postData = qs.stringify(this.user)
            this.axios.post('/api/user/login',
                postData
            ).then(res=>{
                console.log(res)

                this.$store.commit('setToken',res.data.token);
                console.log(sessionStorage.getItem('token'));
            })
        }
    }
}
</script>

这只是一小部分的学习实验，Vuex还有很多强大的功能利用到，后面会学习如何配合动态路由校验，如果有思路不清晰的地方还望各位前辈们指出。

每隔一段时间会更新一下文章，起到一个总结的作用，若以后某一天发现自己现在写的都是垃圾的话，说明自己真的进步了，嘿嘿嘿~