Vue之Vuex存储用户身份

1、Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

简单理解就是：共享数据的地方，存储数据（状态数据）

2、客户端共享数据区域：

1、Cookie区域，存储在浏览器端，4kb字符串

2、本地存储：

（1）localStorage 永久存储 5M
（2）sessionStorage 会话

Vuex 内存 刷新页面数据丢失

3、核心方法：

将公共数据封装在state里面：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //状态区域，定义数据的地方
    user:{
      id:'',
      username:'',
      roleId:'',
      roleName:''
    },
    bool:true
  },
  mutations: {
    //相当于编写set方法
    setUser:function(state,LoginUser){
          state.user=LoginUser;
    },
    setBool:function(state,b){
          state.bool=b;
    }
  },
  actions: {
    //写一些异步的操作
    setUserAysnc:function(context,LoginUser){
         context.commit("setUser",LoginUser);
    }
  },
  modules: {
  }
})

在页面中给上述方法传参：

<script>
export default {
    data(){
      return{
         ruleForm:{
           username:" ",
           password:" "
         }
      }
    },
    methods:{

        login:function(){
          //var _this=this;使用箭头函数可以直接使用this
          /* _this.$axios({
                      method:"post",
                      url:"http://123.57.7.108:1024/emall/login",
                      data:{
                          username:this.ruleForm.username,
                          password:this.ruleForm.password
                      }
                  }).then(function(response){
                       if(response.data.code=="200"){
                          window.localStorage.setItem("token",response.data.data.token);//永久存储令牌
                          _this.$message({
                               message: '登录成功',
                               type: 'info'
                                 });
                        }else{
                                 _this.$message({
                                   showClose: true,
                                    message: '用户名或者密码错误',
                                    type: 'warning'
                               });
                          }
                  }).catch(function(error){
                       _this.$alert(error);
                  });*/
                  //改写axios
            //data就是从数据接口中获取数据对象
          this.$api.__api_login( this.ruleForm).then(data=>{
                    this.$message({
                      message:'登录成功哦',
                      type:'info'
                    });

                    //存储token
                    window.localStorage.setItem("token",data.data.token);
                    //跳转页面即切换路由
                    //将用户信息取出来，存储在Vuex中
                    //this.$store.commit("setUser",data.data.user);

                     //如果要用action进行异步操作
                     this.$store.dispatch("setUserAysnc",data.data.user);
                    

                    //this.$store.commit("setUser",date.date.user);
                   /* this.$router.push({
                      path:'/about',
                      query:{ 
                         name:this.ruleForm.username
                      }
                    });*/
      
                    //通过name切换路由,类似于post,保护数据
                    this.$router.push({
                      name:'About',
                      params:{
                         name:this.ruleForm.username
                      }
                    });
          }).catch(error=>{
                     this.$message({
                      message:'我是catch,登录失败',
                      type:'info'
                    });
          });
        }
    }
}
</script>

然后就可以再其他页面使用：

<template>
  <div class="about">
    <h1>跳转到了About页面</h1>
    <h4>{{this.$route.params.name}}</h4>
    <h5>
      从Vuex中获取User信息：
      {{this.$store.state.user.roleName}}
    </h5>
  </div>
</template>