【Vue】vuex状态管理的使用，以登录状态保持为例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014322206/article/details/85161720

一、Vuex概念

       Vue.js通过Vuex对组件的公共状态进行集中管理。每一个 Vuex 应用的核心是 store（仓库），“store”可以理解为是一个容器，包含着应用中大部分的状态 (state)。这些状态是全局的，但Vuex 和单纯的全局对象有以下两点不同：

    ① Vuex 的状态存储是响应式的。 Vue 组件从 store 中读取状态时，若 store 中的状态发生变化，那么相应的组件也会更新。

    ② 不能直接改变 store 中的状态。改变store中状态的唯一途径是显示地提交mutation。

二、网站登录状态保持例子

业务流程：

用户通过网页表单提交用户名和密码，后台根据提交的数据生成token，与数据库进行匹配，并给前端返回信息。

前端调用vuex的changeLogin方法将后台返回的token数据保存到localstorage中，并更新store中state的Authorization。

代码如下：

login.vue

<template>
    <div class="login-wrap">
        <div class="ms-login">
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0px" class="ms-content">
                <el-form-item prop="loginName">
                    <el-input v-model="loginForm.loginName" placeholder="用户名">
                        <el-button slot="prepend" icon="icon-d-wo1"></el-button>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input type="password"  v-model="loginForm.password" placeholder="密码">
                        <el-button slot="prepend" icon="icon-d-yuechi1"></el-button>
                    </el-input>
                </el-form-item>

                <div class="login-btn">
                    <el-button type="primary" @click="login">登录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import { mapMutations } from 'vuex';
    export default {
        data: function(){
            return {
                loginForm: {
                    loginName: '',
                    password: ''
                },
                userToken:'',
                rules: {
                    loginName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            ...mapMutations(['changeLogin']),
            login(){
                if(this.loginForm.loginName === '' || this.loginForm.password === ''){
                    alert('账号或密码不能为空');
                }else{
                    axios({
                        method: 'post',
                        url: '/admin/login',
                        params:{
                            loginName: this.loginForm.loginName,
                            password: this.loginForm.password   
                        },
                        headers:{
                            'Content-type':'application/x-www-form-urlencoded'
                        }
                    }).then(res=>{
                        console.log(res.data);
                        this.$router.push('/home');
                       
                        this.userToken = res.data.data.token;
                        
                        //将用户token保存到vuex中
                        this.changeLogin({Authorization: this.userToken });
                            
                    }).catch(error=>{
                        console.log(error)
                    })
                }
            }
        }
    }
</script>

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 
const store = new Vuex.Store({
 
  state: {
    // 存储token
    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
  },
 
  mutations: {
    // 修改token，并将token存入localStorage
    changeLogin (state, user) {  //这里的state对应上面状态state
      state.Authorization = user.Authorization;
      localStorage.setItem('Authorization', user.Authorization);
    }
  }
});

export default store

 

扫描二维码关注公众号，回复： 4598420 查看本文章

对vuex各个属性的理解参考：https://www.cnblogs.com/mengfangui/p/9150530.html