前言

通常在用vue开发后台管理项目时都会设计用户登录页面，在用户输入用户名和密码后，我们需要向服务器发起请求，请求成功后在跳转到欢迎界面或者主界面之前要先将用户信息存储起来，这时候就可以考虑用vuex。

一、Vuex

1.什么是Vuex？

Vuex 是 Vue的状态管理模式 + 库。它采用集中式存储的方法，创建一个公共存储的库，所有组件都可以去访问这个库，当存储的数据发生改变会导致相应的组件也发生改变进而去更新视图。

2.Vuex的核心概念

Vuex的核心概念有5个。分别是State,getter,mutation,action, module。

state：数据源存放地，相当于Vue中的data。
getters：从基本数据派生的数据，相当于Vue中的计算属性computed。
mutations：提交更改数据的方法，相当于Vue中的method。
actions：像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

需要注意的点：

在vue中使用vuex中state的数据用this.$store.state.xxx
getter 接受 state 作为其第一个参数
mutation也会接受 state 作为第一个参数，还能接收第二个参数（即mutation 的载荷）。当要调用一个 mutation 处理函数时，需要通过store.commit 方法来提交mutation，不能直接去触发mutation。还可以向 store.commit 传入额外的参数，来作为mutation 的载荷。

其他详情请见Vuex开发文档

二、在登录页面中用Vuex来存储用户信息

1.Login页面代码

<template>
  <div class="login_wrapper">
    <div class="modal">
      <el-form :model="user" status-icon :rules="rules" ref="userForm">
        <div class="title">火星</div>
        <el-form-item prop="userName">
          <el-input type="text" prefix-icon="el-icon-user" v-model="user.userName"/>
        </el-form-item>
        <el-form-item prop="userPwd">
          <el-input type="password" prefix-icon="el-icon-view" v-model="user.userPwd"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login_btn" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default{
      name:'login',
      data(){
        return {
          user:{
            userName:'',
            userPwd:''
          },
          rules:{
            userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
            userPwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
          }
        }
      }, 
      methods:{
        login(){
          this.$refs.userForm.validate((valid)=>{
            if(valid){
              this.$api.login(this.user).then((res)=>{
              //通过commit提交saveUserInfo方法，并传入res作为saveUserInfo的载荷
                this.$store.commit('saveUserInfo',res) 
                this.$router.push('/welcome')
              })
            }
            else{
              return false
            }
          })
        }
      }
    }
  </script>

2.创建store

在src目录下创建store文件夹，在store下分别创建index.js和mutations.js。

index.js 在这里插入图片描述 mutations.js

3.在main.js中挂载使用

import store from './store'
app.use(store)

4.测试

输入用户和密码在这里插入图片描述点击登录后，信息已经成功存储到localStorage和store内。

vue项目登录页面中用vuex来保存信息

前言